单独使用 CSS 可以创建具有固定标题的跨浏览器兼容的滚动表吗？

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

问题：

是否有一个纯 CSS 解决方案来创建可滚动的具有固定标题的跨浏览器表格符合吗？

要求：

• 保持页眉、页脚和内容行之间的列对齐
• 保持页眉和页脚固定，同时内容垂直滚动
• 无 jQuery 或 JavaScript必需
• 仅使用与表格相关的标签（table、thead、tbody、tr、th、td）

使用 Position: Sticky 的解决方案：

兼容性说明： 使用前检查对position:sticky 的支持解决方案。

position:sticky 相对于最近的滚动祖先或视口（如果没有滚动祖先）定位元素。此行为与所需的粘性标头保持一致。

但是，将position:sticky 分配给

、 或 会更容易。标签在各种浏览器中都会遇到问题。相反，将粘性属性分配给

定义滚动溢出的包装元素内的单元格。

代码：

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

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

/* Styling */
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 scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">head4</th>
      </tr>
    </thead>
    <tbody>
      <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>
      <!-- additional rows omitted for brevity -->
    </tbody>
  </table>
</div>

以上是单独使用 CSS 可以创建具有固定标题的跨浏览器兼容的滚动表吗？的详细内容。更多信息请关注PHP中文网其他相关文章！