创建带有非滚动列标题的 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>

所以，基本上，我希望网格标题元素具有粘性，而网格内容元素可以滚动。但是，我不知道如何设计这些元素的样式来实现这一点。

如果这不能用纯 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>