HTML表格固定頭和垂直滾動條上的表體

Question

我的筆：

http://codepen.io/helloworld/pen/qHDFB

我想創建一個HTML表：

• 隨着保持固定
頭
• 顯示滾動條的表格主體
• 高度不應具有固定的像素高度，它應具有100％的高度。
• 標題單元格應該與行單元格對齊。我提到這一點，因爲我經常看到解決方案，其中column1水平地輸入header2的區域。這看起來很糟糕。
• 當列的寬度爲百分比但不包含像素時，對我來說還可以，因爲那樣不會響應。
• 性能不起作用，它將顯示最多16行appr。最多7列。

我只想使用CSS。

它應該在IE10 +和最新的FF/Chrome中工作。

您還可以從Microsoft將被移植到WebKit的等等......與-MS-電網等使用新的CSS網格佈局...

我怎樣才能使上述各樣品的工作，該標頭保持不變，並且表格的主體具有垂直滾動條而不是html主體本身？

HTML

<table> 
    <thead> 
    <tr> 
     <th> 
     <div>First</div> 
     </th> 
     <th> 
     <div>Second</div> 
     </th> 
     <th> 
     <div>Third</div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr> 
    <tr> 
     <td>First</td> 
     <td>Second</td> 
     <td>Third</td> 
    </tr>     
    </tbody> 
</table> 

CSS

body, html{ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
} 

table{ 
    width:100%; 
    height:100%; 
} 

td{ 
    width:33%; 
    border:black solid 1px; 
} 

tbody{ 
    overflow-x:hidden; 
    overflow-y:auto; 
} 

tr td{ 
    text-align:center; 
    height:100px; 
} 

th{ 
    background:lightgray; 
    padding:10px; 
    border:black solid 1px; 
} 

Answer 1

這不是你想要的？ - http://www.imaputz.com/cssStuff/bigFourVersion.html

只是查看示例的源代碼，這應該讓你去。

Answer 2

 <table> 
      <thead> 
       <tr> 
        <th> 
         <div>First</div> 
        </th> 
        <th> 
         <div>Second</div> 
        </th> 
        <th> 
         <div>Third</div> 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr> 
       <tr> 
        <td>First</td> 
        <td>Second</td> 
        <td>Third</td> 
       </tr>     
      </tbody> 
     </table>