HTML表格——使用CSS冻结行和列

目录

介绍

例子

使用代码

解释

样式表

样式化TH（标题）

冻结第1列

冻结第2列

---

介绍

本文展示了一种仅使用CSS冻结HTML表格列和行的可能方法，而无需JavaScript或JQuery。

例子

示例 1：如Youtube教程视频所示

• https://adriancs.com/demo/freeze_table_column_row_responsive_youtube.html

示例 2：固定宽度和高度

• https://adriancs.com/demo/freeze_table_column_row.html

示例 3：响应式宽度和高度（使用视口调整）

• https://adriancs.com/demo/freeze_table_column_row_responsive_viewport.html

使用代码

我们以一个简单的HTML Table为例：

<div class="div1">
    <table>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
            <th>Column 6</th>
        </tr>
        <tr>
            <td>Row Data 1</td>
            <td>Row Data 2</td>
            <td>Row Data 3</td>
            <td>Row Data 4</td>
            <td>Row Data 5</td>
            <td>Row Data 6</td>
        </tr>
        <tr>
            <td>Row Data 1</td>
            <td>Row Data 2</td>
            <td>Row Data 3</td>
            <td>Row Data 4</td>
            <td>Row Data 5</td>
            <td>Row Data 6</td>
        </tr>

        <tr>
            <td>Row Data 1</td>
            <td>Row Data 2</td>
            <td>Row Data 3</td>
            <td>Row Data 4</td>
            <td>Row Data 5</td>
            <td>Row Data 6</td>
        </tr>
    </table>
</div>

这是具有魔力的CSS：

.div1 {
    width: 600px;
    height: 400px;
    overflow: scroll;
    border: 1px solid #777777;
}

.div1 table {
    border-spacing: 0;
}

.div1 th {
    border-left: none;
    border-right: 1px solid #bbbbbb;
    padding: 5px;
    width: 80px;
    min-width: 80px;
    position: sticky;
    top: 0;
    background: #727272;
    color: #e0e0e0;
    font-weight: normal;
}

.div1 td {
    border-left: none;
    border-right: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    padding: 5px;
    width: 80px;
    min-width: 80px;
}

.div1 th:nth-child(1),
.div1 td:nth-child(1) {
    position: sticky;
    left: 0;
    width: 150px;
    min-width: 150px;
}

.div1 th:nth-child(2),
.div1 td:nth-child(2) {
    position: sticky;
    /* 1st cell left/right padding + 1st cell width + 1st cell left/right border width */
    /* 0 + 5 + 150 + 5 + 1 */
    left: 161px;
    width: 50px;
    min-width: 50px;
}

.div1 td:nth-child(1),
.div1 td:nth-child(2) {
    background: #ffebb5;
}

.div1 th:nth-child(1),
.div1 th:nth-child(2) {
    z-index: 2;
}

解释

首先，使用一个DIV标签来包含TABLE，提供一个固定的宽度和高度来将一个很长很宽的HTML表格变成可滚动的表格。

.div1 {
    width: 600px;
    height: 400px;
    overflow: scroll;
    border: 1px solid #777777;
}

“overflow: scroll”的属性将使表格可滚动。

为了构建响应式表格，可以使用CSS函数“CALC”来自动计算宽度，例如：

.div1 {
    height: calc(100vh - 250px);
    width: calc(100vw - 100px);
    overflow: scroll;
    border: 1px solid #777777;
}

请注意，CALC值之间需要空格。

例如，这是错误的：

height: calc(100vh-250px);

这是正确的：

height: calc(100vh - 250px);

“vh”或“vw”是“Viewport”单位。

• 100vh = 100% 可见高度，类似于窗口大小，它指的是可见区域。
• 100vw = 100% 可见宽度。

样式表

.div1 table {
    border-spacing: 0;
}

• border-spacing: 0, 消除单元格之间的空白距离

请注意，在这种情况下不能使用“border-collapse: collapse”的属性。这是因为边界线将与“position: sticky”一起表现不正确，这将在下面讨论。

样式化TH（标题）

.div1 th {
    border-left: none;
    border-right: 1px solid #bbbbbb;
    padding: 5px;
    width: 80px;
    min-width: 80px;
    position: sticky;
    top: 0;
    background: #727272;
    color: #e0e0e0;
    font-weight: normal;
}

• position: sticky，这将使TH单元格始终保持在顶部位置
• top: 0，这告诉TH 单元格始终停留在从顶部测量的位置0（零）
• background，没有背景颜色，底部TD单元格会“撞”成TH单元格，使它们相互重叠
• width, min-width：这个是用来固定列宽的，没有这些属性，单元格列会变形压缩

这是将冻结“标题”。

冻结第1列

.div1 th:nth-child(1),
.div1 td:nth-child(1) {
    position: sticky;
    left: 0;
    width: 150px;
    min-width: 150px;
}

• nth-child(1)表示每个“TR”块中的第一个元素。指第第1列。
• left: 0告诉单元格在左起零位置“冻结”。

冻结第2列

.div1 th:nth-child(2),
.div1 td:nth-child(2) {
    position: sticky;
    /* 1st cell left/right padding + 1st cell width + 1st cell left/right border width */
    /* 0 + 5 + 150 + 5 + 1 */
    left: 161px;
    width: 50px;
    min-width: 50px;
}

下一个单元格位置的计算是：边框宽度+ 填充 + 单元格宽度

在这种情况下，0左边框宽度+ 5px左填充 + 150px（第一个单元格宽度）+ 5px右填充）  + 1px右边框宽度= 161px。

因此， left: 161px

接下来，当表格向右滚动时，非粘性单元格将与第一个和第二个冻结单元格碰撞并重叠。

为第一个和第二个冻结单元格提供背景颜色以解决重叠问题：

.div_maintb td:nth-child(1),
.div_maintb td:nth-child(2) {
    background: #ffebb5;
}

现在，前两个冻结的“TH”和“TD”都“sticky”了。由于“TD”是在“TH”之后创建的，所以当向下滚动表格时，“TD”会一直停留在顶部，将“TH”覆盖，使“TH”隐藏在“TD”之下。

因此，我们可以设置"TH"的"z-index"的CSS值来覆盖将其置于前面/顶部的层，这样"TD"现在将位于"TH"的下方/后面。

默认情况下，所有元素的默认值为“z-index=0”。

.div1 th:nth-child(1),
.div1 th:nth-child(2) {
    z-index: 2;
}

https://www.codeproject.com/Articles/5320138/HTML-Table-Freeze-Row-and-Column-with-CSS