Jak zrobić stały nagłówek tabeli wewnątrz scrollable div?

Question

Chcę, aby nagłówek mojego stołu został naprawiony. Stolik znajduje się wewnątrz przewijanego elementu div. Poniżej znajduje się mój kod.

<div id="table-wrapper"> 
    <div id="table-scroll"> 
     <table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable"> 
      <thead> 
       <tr> 
        <th>Order ID</th> 
        <th>Order Date</th> 
        <th>Status</th> 
        <th>Vol Number</th> 
        <th>Bonus Paid</th> 
        <th>Reason for no Bonus</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td><%=snd.getOrderId()%></td> 
        <td><%=snd.getDateCaptured()%></td> 
        <td><%=snd.getOrderStatus()%></td> 
        <td>Data Not Available</td> 
        <td>Data Not Available</td> 
        <td>Data Not Available</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Poniżej jest mój CSS, który używam w powyższym Gr:

#table-wrapper { 
    position:relative; 
} 

#table-scroll { 
    height:250px; 
    overflow:auto; 
    margin-top:20px; 
} 

#table-wrapper table { 
    width:100%; 
} 

#table-wrapper table * { 
    background:white; 
    color:black; 
} 

#table-wrapper table thead th .text { 
    position:absolute; 
    top:-20px; 
    z-index:2; 
    height:20px; 
    width:35%; 
    border:1px solid red; 
} 

Answer 1

Jak o zrobieniu czegoś takiego? Zrobiłem to od zera ...

Co zrobiłem to 2 tabele, jedna dla nagłówka, która będzie zawsze statyczna, a druga tabela renderuje komórki, które owinąłem przy użyciu elementu div o stałej wysokości, oraz umożliwienie zwój, używam overflow-y: auto;

również upewnić się użyć o stałej szerokości td elementy tak, że table nie pęka, gdy stosuje się ciąg bez white space, więc inorder przerwać ten ciąg Używam word-wrap: break-word;

Demo

.wrap { 
    width: 352px; 
} 

.wrap table { 
    width: 300px; 
    table-layout: fixed; 
} 

table tr td { 
    padding: 5px; 
    border: 1px solid #eee; 
    width: 100px; 
    word-wrap: break-word; 
} 

table.head tr td { 
    background: #eee; 
} 

.inner_table { 
    height: 100px; 
    overflow-y: auto; 
} 

<div class="wrap"> 
    <table class="head"> 
     <tr> 
      <td>Head 1</td> 
      <td>Head 1</td> 
      <td>Head 1</td> 
     </tr> 
    </table> 
    <div class="inner_table"> 
     <table> 
     <tr> 
      <td>Body 1</td> 
      <td>Body 1</td> 
      <td>Body 1</td> 
     </tr> 
     <!-- Some more tr's --> 
    </table> 
    </div> 
</div>