如何仅使用 CSS 创建具有固定标题的可滚动表格？

具有固定标题的仅 CSS 滚动表

此问题需要仅 CSS 解决方案来创建具有固定标题的可滚动表。此解决方案的要求包括：

1. 保持页眉、页脚和内容行之间的列对齐
2. 在内容垂直滚动时允许页眉和页脚保持固定
3. 仅使用与表格相关的 HTML 标签（table、tr、th、td 等），而不使用 JavaScript 或jQuery

使用 Position: Sticky 的解决方案

一种可能的解决方案涉及使用position: Sticky 属性。它的工作原理如下：

位置的使用：sticky

粘性定位将元素分配给相对位置，除了偏移量是根据最近的祖先滚动计算的如果没有这样的祖先，则为盒子或视口。此行为非常适合固定表头。

代码

以下代码演示了此技术：

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </table>
</div>

此代码代码片段将表格放置在带有滚动条的包装 div 中。通过将position:sticky分配给表格标题中的第th个元素，标题在内容垂直滚动时保持固定。

以上是如何仅使用 CSS 创建具有固定标题的可滚动表格？的详细内容。更多信息请关注PHP中文网其他相关文章！