如何实现表头sticky固定且表格支持横向滚动？

问题场景 #

需要实现两个核心需求：

• 表格表头随页面滚动固定在视口顶部
• 表格宽度受父容器（300px）限制，内容超出时支持横向滚动

但遇到冲突：给父容器添加overflow-x: auto后，表头的sticky定位失效；移除该属性，表头固定正常，但表格内容会直接超出父容器宽度。尝试过给<th>设置sticky、将overflow应用在table/thead/tbody上，均无法解决问题，需要纯CSS方案，不依赖JavaScript。

解决方案原理 #

当元素的父容器设置了overflow属性时，position: sticky的定位基准会从视口变为该父容器，导致表头无法固定在视口顶部。因此需要拆分横向滚动和纵向滚动的容器：

1. 外层容器仅负责横向滚动，不限制纵向滚动
2. 表格的<tbody>单独设置纵向滚动，让表头的sticky以视口为基准定位

实现代码 #

修改后的CSS #

/* 外层容器：控制横向滚动 */
.table-container {
  max-width: 300px;
  overflow-x: auto;
}

/* 表格基础样式 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 可选，让列宽均匀分配 */
}

/* 表头固定 */
thead th {
  position: sticky;
  top: 0;
  background: #fff; /* 加背景色避免被下方内容遮挡 */
  border-bottom: 1px solid #ddd;
}

/* tbody纵向滚动 */
tbody {
  display: block;
  max-height: 400px; /* 设置tbody最大高度，超出滚动 */
  overflow-y: auto;
}

/* 保证thead和tbody的行宽度一致，列对齐 */
thead tr, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 单元格基础样式 */
th, td {
  padding: 8px;
  text-align: left;
  border-right: 1px solid #ddd;
}

修改后的HTML #

<div class="table-container">
  <table>
    <thead>
      <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>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
        <th>Column 13</th>
        <th>Column 14</th>
        <th>Column 15</th>
        <th>Column 16</th>
        <th>Column 17</th>
        <th>Column 18</th>
        <th>Column 19</th>
        <th>Column 20</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
      <tr><td>Some fake row</td></tr>
    </tbody>
  </table>
</div>

关键说明 #

• table-layout: fixed：让表格列宽均匀分配，避免因内容长度导致列宽不一致，保证表头和内容列对齐
• tbody设置display: block和overflow-y: auto：让tbody单独纵向滚动，不影响表头的sticky定位
• 表头添加背景色：防止滚动时下方内容透过表头显示，影响可读性

内容的提问来源于stack exchange，提问作者James Black