是否可以使用网格布局制作带有冻结/固定标题的表格答案

【问题标题】：Is it possible to use grid layout to make a table with frozen/fixed header是否可以使用网格布局制作带有冻结/固定标题的表格
【发布时间】：2018-02-06 23:24:33
【问题描述】：

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

这可能吗？

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
@Paulie_D 那么，我应该写给你如何在网格布局中制作网格吗？我应该列出我做过的谷歌搜索吗？我的意思是，我知道我是一个低代表用户，但到目前为止我只写了答案，而且我认为它们显示得足够好，我不会在这里将 SO 作为代码编写服务。这个问题的思路是“我可以使用这个原语来实现某件事吗”，根据我对网格布局的理解，答案可能是否定的。
老实说，我有点确定这之前没有尝试过（基于我的谷歌搜索）或者是完全不可能的。就我自己对网格布局的理解而言，这也是不可能的，但由于这是 HTML 中表格的主要问题之一，并且网格布局应该解决网格（表格的超集）的主要问题。问这是否是它解决的问题之一似乎是一件非常合理的事情。
@Paulie_D 此外，假设您投票结束这个问题：我绝不会问“修复我的代码”问题。这是对我的问题的最小描述：工具 X 可以解决已知问题 Y 吗？我什至不要求代码，回答说“是的，使用这些和这些属性和/或 css 函数”回答了这个问题。

标签： css grid-layout

【解决方案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;
}

希望对你有帮助。

【讨论】：

太棒了：O