css - 是否可以使用网格布局来制作带有卡住/固定标题的表格

Question

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

这可能吗？

Answer 1

我最近从 @Nicolas CHEVOBBE 发现了这个代码笔:

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;
}

希望对您有所帮助。