处理大型数据集时，通常需要显示具有固定标题和可滚动正文的表格。这使用户可以轻松导航表格，而不会丢失列标题。
不幸的是，此问题的最简单解决方案要么无法与 Bootstrap 配合使用，要么会干扰样式。
固定表格头 - 仅 CSS
对于 Chrome、Firefox 和 Edge，只需使用以下 CSS 即可使列标题粘在表格顶部：
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }<div class="tableFixHead">
<table border="1">
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>以上是如何使用 CSS 创建固定标题、可滚动正文的表格？的详细内容。更多信息请关注PHP中文网其他相关文章！
