如何为嵌套HTML表格实现首列表头固定、主体滚动的CSS方案

核心思路 #

通过相对定位+绝对定位固定首列，结合块级布局实现表格主体的横向/纵向滚动，同时兼容嵌套表格结构：

• 外层表格设为相对定位，作为固定列的定位基准
• 首列单元格（含表头和内容行）设绝对定位，固定在左侧
• 非首列区域设置左边距留出固定列空间，通过overflow实现滚动
• 重置嵌套表格的布局属性，避免继承外层样式导致变形

示例HTML（匹配场景） #

<div class="table-container">
  <table class="outer-table">
    <thead>
      <tr>
        <th class="fixed-column">固定表头列</th>
        <th>普通表头1</th>
        <th>普通表头2</th>
        <th>普通表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="fixed-column">行1固定列</td>
        <td>
          <table class="inner-table">
            <thead>
              <tr>
                <th>嵌套表头1</th>
                <th>嵌套表头2</th>
                <th>嵌套表头3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>嵌套内容1</td>
                <td>嵌套内容2</td>
                <td>嵌套内容3</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>行1内容2</td>
        <td>行1内容3</td>
      </tr>
      <tr>
        <td class="fixed-column">行2固定列</td>
        <td>
          <table class="inner-table">
            <thead>
              <tr>
                <th>嵌套表头A</th>
                <th>嵌套表头B</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>嵌套内容A</td>
                <td>嵌套内容B</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>行2内容2</td>
        <td>行2内容3</td>
      </tr>
    </tbody>
  </table>
</div>

核心CSS代码 #

/* 容器限制宽度，避免外层溢出 */
.table-container {
  width: 100%;
  overflow-x: hidden;
}

/* 外层表格：相对定位+边框合并 */
.outer-table {
  position: relative;
  width: 100%;
  border-collapse: collapse;
}

/* 固定列样式：表头/内容行的首列通用 */
.fixed-column {
  position: absolute;
  left: 0;
  top: auto;
  width: 180px; /* 自定义固定宽度 */
  background-color: #f5f5f5;
  border-right: 2px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

/* 非固定列区域：块级排列+宽度适配 */
.outer-table thead tr,
.outer-table tbody tr {
  display: block;
}

.outer-table thead tr th:not(.fixed-column),
.outer-table tbody tr td:not(.fixed-column) {
  display: inline-block;
  /* 根据非固定列数量调整，这里是3列 */
  width: calc((100% - 180px) / 3);
  padding: 8px 12px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

/* 表格主体垂直滚动（可选） */
.outer-table tbody {
  display: block;
  max-height: 400px; /* 自定义触发滚动的高度 */
  overflow-y: auto;
}

/* 嵌套表格重置：避免继承外层块级布局 */
.inner-table {
  width: 100%;
  border-collapse: collapse;
}

.inner-table th,
.inner-table td {
  display: table-cell;
  width: auto;
  border: 1px solid #eee;
  padding: 6px 8px;
}

关键调整说明 #

1. 固定列宽度：180px可按需修改，需同步calc中的数值
2. 非固定列数量：如果非固定列不是3列，修改calc里的除数即可
3. 垂直滚动：不需要的话删掉tbody的max-height和overflow-y属性
4. 嵌套表格：必须重置display:table-cell，否则嵌套表格会变成块级布局，破坏原有结构

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