如何使用 CSS 实现一个固定表头 (Sticky Header) 的表格？

推荐答案

// www.javascriptcn.com code example
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <!-- ... more headers ... -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
        <!-- ... more cells ... -->
      </tr>
       <!-- ... more rows ... -->
      <tr>
        <td>Row N, Cell 1</td>
        <td>Row N, Cell 2</td>
        <td>Row N, Cell 3</td>
         <!-- ... more cells ... -->
      </tr>
    </tbody>
  </table>
</div>

// www.javascriptcn.com code example
.table-container {
    overflow: auto; /* Or overflow-y: auto for vertical scroll only */
    max-height: 300px; /* Optional: set a max height for the container */
}

table {
    border-collapse: collapse;
    width: 100%;
}


thead th {
  position: sticky;
  top: 0;
  background-color: #f0f0f0; /* Optional: header background color */
  z-index: 1; /* Optional: if there's overlap */
}


th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

本题详细解读

要实现一个固定表头 (Sticky Header) 的表格，核心在于使用 position: sticky; 和 top: 0; 属性。以下是详细步骤和解释：

1. HTML 结构:

   • 使用标准的 <table>, <thead>, <tbody>, <th>, <td> 元素创建表格。
   • 使用一个容器元素(div.table-container) 包裹住 table 元素，用于设置滚动。

2. CSS 实现:

   • 容器设置:
     • div.table-container 需要设置 overflow: auto (或 overflow-y: auto) 来允许表格内容滚动。
     • 可以设置 max-height 来限制表格容器的高度，以便用户可以通过滚动查看内容，而非撑开整个页面。
   • 表格基础样式:
     • 设置 table 元素的 border-collapse: collapse; 使边框合并。
     • 设置 width: 100%; 使表格宽度充满容器。
   • 固定表头:
     • thead th 元素是我们要固定展示的表头单元格。
     • 设置 position: sticky; 使元素在滚动到一定位置后固定。
     • 设置 top: 0; 指定元素固定在容器顶部的位置。
     • 设置 background-color 为表头设置背景颜色，避免表头滚动时被内容遮挡。
     • z-index: 1; 是可选的，用于解决当表头和其他有定位的元素产生遮挡时的问题，通常不需要。
   • 表头和单元格样式:
     • 设置 th, td 元素的边框 border、内边距 padding 和文本对齐方式 text-align 等基础样式。

工作原理：

当用户滚动表格内容时：

• position: sticky; 会让表头元素一开始像 position: relative; 一样正常布局。
• 当表头元素滚动到容器顶部，且 top: 0; 生效时，表头会固定在顶部，并且不会随着滚动条的移动而移动，从而实现固定表头的效果。
• 容器元素的 overflow: auto 或 overflow-y: auto 属性允许表格内容在超出容器高度时滚动。

注意事项：

• position: sticky 属性需要在父元素设置 overflow 属性（通常是 overflow: auto, overflow-x: auto, overflow-y: auto 或 overflow: scroll）时才生效。
• position: sticky 的元素必须拥有一个“滚动容器”，也就是设置了 overflow 的元素，通常是表头的父元素，或者表格本身。
• z-index 属性可以用来解决表头和同层级或相邻元素重叠问题。
• 浏览器兼容性：position: sticky 在现代浏览器中支持良好，但可能需要在旧浏览器中进行polyfill处理或使用其他方法替代。