如何使用 CSS 创建固定标题、可滚动正文的表格？

如何制作具有可滚动正文的固定标题表格

处理大型数据集时，通常需要显示具有固定标题和可滚动正文的表格。这使用户可以轻松导航表格，而不会丢失列标题。

不幸的是，此问题的最简单解决方案要么无法与 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中文网其他相关文章！