创建具有非滚动列标题的 CSS 网格

Question

我想使用纯 CSS 网格设计来创建一个类似表格的显示，其中每一列的顶行都有一个“标题”单元格，该单元格不滚动（在 y 中），而网格的主体将滚动.

这是一个（非工作）示例 HTML 作为起点，其中一些符号表示我想要的结果：

<style>
    .main-view {
        display: flex;
        flex-direction: column;
        overflow: auto;
        height: 8rem;
    }
    .grid-body {
        display: grid;
        grid-template-columns: max-content max-content 1fr;
        row-gap: 0.1rem;
        column-gap: 0.5rem;
        height: 8rem;
        margin: 0.5rem;
        border: solid 1px red;
        overflow: auto;
    }
    .grid-header {
        display: contents;
    }
    .grid-content {
        display: contents;
    }
    .grid-header label {
        font-weight: bold;
        text-align: center;
        background-color: lightgray;
        border-bottom: solid 1px black;
    }
    .grid-content label {
        text-align: center;
        height: 3rem;
        background-color: lightblue;
    }
</style>

<div class="main-view"> 
    <div class="grid-body">
        <div class="grid-header">
            <label>Header A</label>
            <label>Header B</label>
            <label>Header C</label>
        </div>
        <div class="grid-content">
            <label>Want header rows</label>
            <label>above this body row</label>
            <label>NOT to scroll but have correct column widths</label>
            <label>Cell Label 01</label>
            <label>Cell Label 02</label>
            <label>Cell Label 03</label>
            <label>Cell Label 04</label>
            <label>Cell Label 05</label>
            <label>Cell Label 06</label>
            <label>Cell Label 07</label>
            <label>Cell Label 08</label>
            <label>Cell Label 09</label>
            <label>Cell Label 10</label>
            <label>Cell Label 11</label>
            <label>Cell Label 12</label>
        </div>
    </div>
</div>

所以，基本上，我希望 grid-header 元素具有粘性，而 grid-content 元素可以滚动。但是，我不知道如何设置这些元素的样式来实现这一点。

如果这不能用纯 CSS 完成，我不介意使用纯 JavaScript 代码来创建效果（例如，使用两个堆叠网格并在底部网格列宽发生变化时修改顶部网格的列宽)。

谢谢！

Answer 1

使用position: sticky; 和top: 0 设置网格标题标签的样式。

<style>
    .main-view {
        display: flex;
        flex-direction: column;
        overflow: auto;
        height: 8rem;
    }
    .grid-body {
        display: grid;
        grid-template-columns: max-content max-content 1fr;
        row-gap: 0.1rem;
        column-gap: 0.5rem;
        height: 8rem;
        margin: 0.5rem;
        border: solid 1px red;
        overflow: auto;
    }
    .grid-header {
        display: contents;
        
    }
    .grid-content {
        display: contents;
    }
    .grid-header label {
        position: sticky;
        top:0%;
        font-weight: bold;
        text-align: center;
        background-color: lightgray;
        border-bottom: solid 1px black;
    }
    .grid-content label {
        text-align: center;
        height: 3rem;
        background-color: lightblue;
    }
</style>

<div class="main-view"> 
    <div class="grid-body">
        <div class="grid-header">
            <label>Header A</label>
            <label>Header B</label>
            <label>Header C</label>
        </div>
        <div class="grid-content">
            <label>Want header rows</label>
            <label>above this body row</label>
            <label>NOT to scroll but have correct column widths</label>
            <label>Cell Label 01</label>
            <label>Cell Label 02</label>
            <label>Cell Label 03</label>
            <label>Cell Label 04</label>
            <label>Cell Label 05</label>
            <label>Cell Label 06</label>
            <label>Cell Label 07</label>
            <label>Cell Label 08</label>
            <label>Cell Label 09</label>
            <label>Cell Label 10</label>
            <label>Cell Label 11</label>
            <label>Cell Label 12</label>
        </div>
    </div>
</div>

Answer 2

为了正确安装sticky header，您需要将position: sticky插入.grid-header label并确保top: 0进行零缩进。

<style>
    .main-view {
        display: flex;
        flex-direction: column;
        overflow: auto;
        height: 8rem;
    }
    .grid-body {
        display: grid;
        grid-template-columns: max-content max-content 1fr;
        row-gap: 0.1rem;
        column-gap: 0.5rem;
        height: 8rem;
        margin: 0.5rem;
        border: solid 1px red;
        overflow: auto;
    }
    .grid-header {
        display: contents;
    }
    .grid-content {
        display: contents;
    }
    .grid-header label {
        position: sticky;
        top: 0;
        font-weight: bold;
        text-align: center;
        background-color: lightgray;
        border-bottom: solid 1px black;
    }
    .grid-content label {
        text-align: center;
        height: 3rem;
        background-color: lightblue;
    }
</style>

<div class="main-view"> 
    <div class="grid-body">
        <div class="grid-header">
            <label>Header A</label>
            <label>Header B</label>
            <label>Header C</label>
        </div>
        <div class="grid-content">
            <label>Want header rows</label>
            <label>above this body row</label>
            <label>NOT to scroll but have correct column widths</label>
            <label>Cell Label 01</label>
            <label>Cell Label 02</label>
            <label>Cell Label 03</label>
            <label>Cell Label 04</label>
            <label>Cell Label 05</label>
            <label>Cell Label 06</label>
            <label>Cell Label 07</label>
            <label>Cell Label 08</label>
            <label>Cell Label 09</label>
            <label>Cell Label 10</label>
            <label>Cell Label 11</label>
            <label>Cell Label 12</label>
        </div>
    </div>
</div>