带有固定标题和表格主体上的垂直滚动条的 Html 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17980433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html table with fixed header and vertical scrollbars on the table body
提问by Elisabeth
My pen:
我的钢笔：
http://codepen.io/helloworld/pen/qHDFB
http://codepen.io/helloworld/pen/qHDFB
I would like to create a html table:
我想创建一个 html 表：
- With a header that stays fixed
- A table body that shows scrollbars
- The height should NOT have a fixed pixel height it should have 100% height.
- The header cells should be aligned to the row cells. I mention this because often I have seen solutions where column1 enters the horizontally the area of header2. This looks bad.
- Its ok for me when the columns have a percentage width but not pixel because that would not be responsive.
- performance plays no role it will show max 16 rows appr. with max 7 columns.
- 带有保持固定的标题
- 显示滚动条的表格主体
- 高度不应具有固定的像素高度，而应具有 100% 的高度。
- 标题单元格应与行单元格对齐。我提到这一点是因为我经常看到 column1 水平进入 header2 区域的解决方案。这看起来很糟糕。
- 当列具有百分比宽度而不是像素时，它对我来说没问题，因为那不会响应。
- 性能不起作用，它最多显示 16 行。最多 7 列。
I want to use CSS only.
我只想使用 CSS。
It should work in IE10+ and latest FF/Chrome.
它应该适用于 IE10+ 和最新的 FF/Chrome。
You can also use the new CSS Grid Layout from Microsoft which will be ported over to webkit etc... with -ms-grid etc...
您还可以使用来自 Microsoft 的新 CSS 网格布局，它将被移植到 webkit 等...与 -ms-grid 等...
How can I make the above individual sample work that the header stays fixed and and the body of the table has vertical scrollbars not the html body itself?
如何使上述单个示例工作，标题保持固定并且表格的主体具有垂直滚动条而不是 html 主体本身？
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
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;
}
回答by Tom
Isn't this what you're looking for? - http://www.imaputz.com/cssStuff/bigFourVersion.html
这不是你要找的吗？- http://www.imaputz.com/cssStuff/bigFourVersion.html
Just view the source of the example, and this should get you going.
只需查看示例的源代码，这应该会让您有所了解。
回答by Elham
<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>
