スクロール可能なdiv内に固定ヘッダーテーブルを作成するには？

Question

私のテーブルのヘッダーを修正したい。テーブルはスクロール可能なdiv内にあります。以下は私のコードです。以下は

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

私は上記のdivのために使用しています私のCSS、次のとおりです。このような何かをすることについてどのように

#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

？私はゼロからそれを作った...

私がしたことは2つのテーブル、1つは常に静的になり、もう1つのテーブルはdiv要素を使ってラップしたセルをレンダリングします固定の高さと、そしてまたoverflow-y: auto;

は、あなたのtableがwhite spaceのない文字列が使用されたときに破損しないように、その文字列を破るためにinorderをので、あなたが、一定の幅でtd要素をを使用することを確認し使用しています、スクロールを有効にします使用しています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>