如何用HTML Table实现固定列，仅让中间列支持横向滚动？

需求说明 #

需要实现HTML表格固定第1、2列和第7、8列，仅中间第3-6列可横向滚动。之前尝试position: sticky方案时出现整个表格横向溢出的问题，现在重新调整实现方式。

解决方案 #

1. 自定义CSS样式（style.css） #

/* 表格容器：限制宽度，仅在内容超出时显示横向滚动条 */
.table-container {
  width: 100%;
  overflow-x: auto;
  position: relative;
}

/* 表格采用固定布局，确保列宽可控，避免内容随意撑开列 */
#user-list-table {
  table-layout: fixed;
  width: 100%;
}

/* 固定第1列：左侧定位，白色背景防止被滚动内容覆盖 */
#user-list-table th:first-child,
#user-list-table td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 2;
}

/* 固定第2列：偏移量匹配第1列宽度，保证对齐 */
#user-list-table th:nth-child(2),
#user-list-table td:nth-child(2) {
  position: sticky;
  left: 80px;
  background-color: #fff;
  z-index: 2;
}

/* 固定最后一列（第8列）：右侧定位 */
#user-list-table th:last-child,
#user-list-table td:last-child {
  position: sticky;
  right: 0;
  background-color: #fff;
  z-index: 2;
}

/* 固定第7列：偏移量匹配最后一列宽度 */
#user-list-table th:nth-child(7),
#user-list-table td:nth-child(7) {
  position: sticky;
  right: 80px;
  background-color: #fff;
  z-index: 2;
}

/* 中间列设置最小宽度，确保滚动区域有足够内容触发滚动 */
#user-list-table th:nth-child(3),
#user-list-table td:nth-child(3),
#user-list-table th:nth-child(4),
#user-list-table td:nth-child(4),
#user-list-table th:nth-child(5),
#user-list-table td:nth-child(5),
#user-list-table th:nth-child(6),
#user-list-table td:nth-child(6) {
  min-width: 200px;
}

/* 修复边框被固定列覆盖的问题 */
#user-list-table th,
#user-list-table td {
  border-right: 1px solid #dee2e6;
}

2. 修改React组件代码 #

调整表格容器结构，并给固定列设置明确宽度：

import * as React from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const users = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
export default function App() {
  const [userList, setUserList] = React.useState(users);
  return (
    <div className="table-container">
      <table
        id="user-list-table"
        className="table table-striped"
        role="grid"
        data-toggle="data-table"
      >
        <thead>
          <tr className="light">
            <th style={{width: '80px'}}>Col one</th>
            <th style={{width: '80px'}}>Col two</th>
            <th>Col three</th>
            <th>Col four</th>
            <th>Col five</th>
            <th>Col six</th>
            <th style={{width: '80px'}}>Col seven</th>
            <th style={{width: '80px'}}>Col eight</th>
          </tr>
        </thead>
        <tbody>
          {userList.map((item, idx) => (
            <tr key={idx}>
              <td style={{width: '80px'}}>1</td>
              <td style={{width: '80px'}}>2</td>
              <td>3</td>
              <td style={{ whiteSpace: 'nowrap' }}>
                It is a long established fact that a reader will be distracted
                by the readable content of a page when looking at its layout.
                The point of using Lorem Ipsum is that it has a more-or-less
                normal distribution of letters, as opposed to using 'Content
                here, content here', making it look like readable English.
                Many desktop publishing packages and web page editors now use
                Lorem Ipsum as their default model text, and a search for
                'lorem ipsum' will uncover many web sites still in their
                infancy. Various versions have evolved over the years,
                sometimes by accident, sometimes on purpose (injected humour
                and the like).
              </td>
              <td>5</td>
              <td>6</td>
              <td style={{width: '80px'}}>7</td>
              <td style={{width: '80px'}}>8</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

关键要点 #

• table-layout: fixed是核心，确保列宽不会被内容随意撑开，让sticky定位更稳定
• 固定列必须设置背景色，否则滚动时中间列的内容会穿透显示
• left/right的偏移值要和对应固定列的宽度完全匹配，避免错位
• 中间列设置min-width保证内容足够时触发滚动条，同时不限制最大宽度

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