如何在 CSS 中创建固定表头

表格函数对于在网页上以单个框架显示数据至关重要。HTML 表格元素显示信息，并在页面上以最小的空间显示用户吸引人的功能。CSS 使用元素和标签为表格及其信息设置样式。

表格的标题需要固定在网页布局的顶部，以便于用户交互。表格的固定标题代表了表格数据，并关联了列及其值。

在 CSS 中创建固定表格标题的方法

CSS 使用不同的属性来实现表格标题的固定。我们可以使用一组不同的 CSS 属性及其值。有两种方法可以使用 CSS 属性创建固定的标题表格。

• 使用 CSS position 和 top 属性：CSS 使用 position 属性和 sticky 值，top 属性使用 0 或负值。
• 使用 CSS display 和 overflow 属性：display 属性使用 block 值，并设置 height 和 vertical overflow 属性。

使用 CSS position 和 top 属性

CSS 使用 position 和 top 这两个属性来实现标题的粘性效果。position 属性使用 sticky，top 属性根据需要使用零 (0) 或负一 (-1) 的值。这些属性用于表格的 <thead> 或 <th> 元素。

语法

以下语法用于创建表格的固定标题。通过“th”标签、“thead”标签或表格名称来应用 CSS 属性。

示例

以下示例显示了带有各种 CSS 属性的表格的粘性或固定标题。

示例 1

该示例显示了表格的基本粘性标题。我们为表格的标题标签使用了 sticky position。

输出

输出显示了表格的固定标题。

示例 2

该示例显示了表格的两个标题。我们可以看到带有信息的两个表格，其标题使用了 position sticky。当显示第一个表格的信息时，第一个表格的标题会固定在页面顶部。当页面上显示第二个表格时，第一个表格的标题会被禁用，第二个表格的标题会固定在网页上。

输出

输出显示了表格的固定标题。

使用 CSS Display 和 Overflow 属性

CSS 使用各种属性来实现表格主体滚动时的固定标题。display 属性为“tr”和“tbody”标签显示块状。body 标签用于表格水平和垂直功能的溢出。

语法

以下语法用于创建固定标题和可滚动表格主体的表格。

描述

• “th”标签和“thead”标签用作带有 block 值的 display 属性。
• “tbody”标签显示 overflow 和 height 属性以固定表格的标题。
• height 根据表格大小使用，overflow 属性具有“auto”值。

示例

以下示例显示了带有不同 CSS 属性的表格的固定标题。

示例 1

以下示例显示了带有基本 CSS 属性的固定标题。表格显示了粘性标题和可滚动主体，使用了 overflow 和 height 属性。

输出

输出显示了表格的固定标题。

示例 2

该示例显示了两个表格的固定位置。表格以固定位置显示标题，但信息主体根据需要滚动。

输出

输出显示了表格的固定标题。

结论

对于用户交互式的大型表格，固定的表格标题是必需的。它有助于创建表格并以用户友好的方式显示表格信息。