是否可以使用网格布局来制作具有冻结/固定标头的表格

Question

网格布局允许我以完全不同的方式在CSS中构建表格这一事实，我试图想出一种方法来制作网格布局，其中第一行保持在视图中，而其余的滚动。重要的是，不会丢失网格行为（具有大量内容的单元格应该更改整个列和/或行的宽度和/或高度，包括不可滚动的第一行）。

这可能吗？

Answer 1

我最近从@Nicolas CHEVOBBE发现了这个codepen：

https://codepen.io/nchevobbe/pen/bYZEqq?editors=0110

它显示了您描述的内容的示例。使用网格布局修复标题行。对于需要花费大量精力进行编码的功能来说，这非常简单。

关键部分是在标题单元格上使用位置sticky：

[role=columnheader] {
  background-color: #F9F9FA;
  position: sticky;
  top: 0;
  padding: 5px;
  border-bottom: 1px solid #E3E4E4;
}

希望它有所帮助。