Come rendere la tabella di intestazione fissa all'interno del div scorrevole?

Question

Voglio rendere corretto l'header del mio tavolo. La tabella è presente all'interno del div scorrevole. Di seguito è il mio codice.

<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> 

Qui di seguito è il mio CSS, che sto usando per il div sopra:

#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

ne dite di fare qualcosa di simile? L'ho fatto da zero ...

Quello che ho fatto è usato 2 tabelle, una per l'intestazione, che sarà sempre statica, e l'altra tabella renderizza le celle, che ho avvolto usando un elemento div con un altezza fissa, e per consentire di scorrimento, sto usando overflow-y: auto;

anche assicurarsi di utilizzare con larghezza fissa td elementi in modo che la vostra table non si rompe quando si utilizza una stringa senza white space, in modo simmetrico a rompere la stringa Sto usando 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>