【发布时间】：2013-08-01 13:43:36
【问题描述】：
我的笔：
http://codepen.io/helloworld/pen/qHDFB
我想创建一个html表格：
- 标题保持固定
- 显示滚动条的表格主体
- 高度不应具有固定的像素高度，而应具有 100% 的高度。
- 标题单元格应与行单元格对齐。我提到这一点是因为我经常看到 column1 水平进入 header2 区域的解决方案。这看起来很糟糕。
- 当列具有百分比宽度但没有像素时，这对我来说没问题，因为这不会响应。
- 性能不起作用，它将显示最多 16 行 appr。最多 7 列。
我只想使用 CSS。
它应该可以在 IE10+ 和最新的 FF/Chrome 中运行。
您还可以使用 Microsoft 的新 CSS 网格布局，它将被移植到 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;
}
【问题讨论】：
-
一个
div能不能把桌子包起来，div有固定的高度？否则，我看不出如何在给它 100% 高度的同时使用滚动条。 -
那不符合我的需要。您可以假设： divWrapper 具有 100% 的高度：内部是 2 个 div。 toolbarDiv 的高度为 40%，tableDiv 的高度为 100%。 tableDiv 内部是固定表格，其行高度固定，这应该使整个表格也固定但仍延伸到底部
-
对不起，之前的评论是错误的链接：codepen.io/anon/pen/CLaFs
-
在 IE10 和 Chrome28 中，垂直滚动条的顶部箭头不可见或部分可见，并且标题单元格应与行单元格对齐，这在您更改的示例中不是这种情况。 （看看这个（见第一张表）salzerdesign.com/test/fixedTable.html我也更新了我的问题，是的，这不是一个简单的问题;-)
-
@ChrisRockwell 我现在使用 datatables jquery 插件，它有一个固定的标题插件，如果数据表父级调整表的大小，也正是我需要的，并且没有在 jquery 插件中实现固定标题表 jquery 插件.