移动端横向滚动对比表实现CSS粘性表头的方案咨询

问题说明 #

开发多项目对比表时，需要实现两个核心效果：

• 移动端横向滚动表格时，<thead>中的<th>固定在屏幕顶部
• 侧边表头（第一列）始终可见，不受横向滚动影响

解决方案 #

1. 修正HTML结构 #

首先将表头部分包裹在<thead>标签内，同时调整滚动容器与表格的层级关系：

<div class="table-wrapper">
  <table>
    <thead>
      <tr class="table-head">
        <th></th>
        <th>Title 1</th>
        <th>Title 2</th>
        <th>Title 3</th>
      </tr>
    </thead>
    <tbody class="table-content">
      <tr>
        <th>Item 1</th>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 2</th>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 3</th>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 4</th>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 5</th>
        <td><div class="icon-container no"></div></td>
        <td><div class="icon-container no"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 6</th>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 7</th>
        <td><div class="icon-container no"></div></td>
        <td><div class="icon-container no"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 8</th>
        <td><div class="icon-container no"></div></td>
        <td><div class="icon-container no"></div></td>
        <td><div class="icon-container yes"></div></td>
      </tr>
      <tr>
        <th>Item 9</th>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <th>Price</th>
        <td class="price">1 €</td>
        <td class="price">2 €</td>
        <td class="price">3 €</td>
      </tr>
      <tr>
        <th></th>
        <td><a class="btn btn-md btn-primary w-full w-lg-auto" href="#">Order</a></td>
        <td><a class="btn btn-md btn-link w-full w-lg-auto" href="#">Learn more</a></td>
        <td><a class="btn btn-md btn-link w-full w-lg-auto" href="#">Learn more</a></td>
      </tr>
    </tbody>
  </table>
</div>

2. 修改CSS样式 #

调整后的CSS实现双粘性表头效果，关键修改已标注：

body {
  padding: 1.5em;
  background: #f6f6f6;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  /* 新增：限制容器高度，支持纵向滚动时表头固定 */
  max-height: 80vh;
  overflow-y: auto;
}

table {
  border-collapse: collapse;
  min-width: 1110px;
  width: 100%;
}

.table-head {
  border-bottom: 1px solid #c2c4c7;
}

/* 顶部表头粘性设置 */
.table-head th {
  text-align: center;
  font-weight: 500;
  font-size: 22px;
  position: sticky;
  top: 0; /* 关键：固定在容器顶部 */
  background: #f6f6f6; /* 必须设置背景，避免下方内容穿透 */
  z-index: 200; /* 高于侧边表头层级 */
}

.table-head th:first-child {
  left: 0; /* 左上角表头同时固定左侧 */
  z-index: 300; /* 层级最高，避免被其他元素遮挡 */
}

.table-content td {
  text-align: center;
}

tr {
  border-bottom: 1px solid #c2c4c7;
}

/* 侧边表头粘性设置 */
.table-content th {
  border: 0;
  padding: 8px;
  position: sticky;
  left: 0; /* 固定在左侧 */
  background: #f6f6f6; /* 设置背景避免内容穿透 */
  z-index: 100;
  text-align: left;
}

td {
  border: 0;
  padding: 8px;
}

td.price {
  color: #58c27d;
  font-weight: bold;
}

.icon-container {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-container.yes {
  background-image: url('data:image/svg+xml;utf8,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.54011 9.2929C4.14959 8.90238 3.51643 8.90238 3.1259 9.2929C2.73538 9.68343 2.73538 10.3166 3.1259 10.7071L8.1259 15.7071C8.53103 16.1122 9.19303 16.0948 9.5763 15.669L18.5763 5.66897C18.9458 5.25846 18.9125 4.62617 18.502 4.25671C18.0915 3.88726 17.4592 3.92053 17.0897 4.33104L8.79481 13.5476L4.54011 9.2929Z" fill="black"/></svg>');
}

.icon-container.no {
  background-image: url('data:image/svg+xml;utf8,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.54785 12V10H18.7855V12H1.54785Z" fill="black"/></svg>');
}

.btn, .btn-link {
  font-weight: bold;
}

@media screen and (max-width: 600px) {
  .table-wrapper {
    width: 100%;
    max-height: 70vh; /* 适配移动端屏幕高度 */
  }
}

关键实现要点 #

• 滚动容器分离：将table-wrapper作为独立滚动容器，表格置于内部，确保粘性定位的参照物正确。
• 顶部表头固定：通过position: sticky; top: 0;实现顶部表头固定，添加背景色防止下方内容穿透。
• 侧边表头固定：给tbody每行的第一个<th>设置position: sticky; left: 0;，同样添加背景色避免穿透。
• 层级管理：用z-index控制元素显示层级，确保左上角表头不会被其他表头遮挡。
• 纵向滚动支持：给容器设置max-height和overflow-y: auto;，实现表格过长时的纵向滚动，同时保持表头固定。

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