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

我想创建一个html表：

>标题保持固定
>显示滚动条的表体
>高度不应该有固定的像素高度,它应该有100％的高度.
>标题单元格应与行单元格对齐.我之所以提到这一点是因为我经常看到其中column1水平进入header2区域的解决方案.这看起来很糟糕.
>当列具有百分比宽度而不是像素时,它对我来说没问题,因为它不会响应.
>性能没有任何作用,它将显示最多16行appr.最多7列.

我只想使用CSS.

它应该适用于IE10和最新的FF / Chrome.

您还可以使用Microsoft的新CSS Grid Layout,它将被移植到webkit等…使用-ms-grid等…

如何使上面的单个样本工作,标题保持固定,并且表的主体有垂直滚动条而不是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;
}