如何在HTML表格中实现固定列+滚动列（仿Excel工作表）

我明白你想要的效果——固定左侧姓名列，右侧大量日期列可以横向滚动，之前嵌套表格的方式确实容易出现单元格对齐错乱、样式冲突的问题，试试用CSS的position: sticky方案，这是目前最简洁可靠的实现方式：

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Fixed Column + Horizontal Scroll Table</title>
    <style>
        /* 表格容器：开启横向滚动 */
        .table-container {
            overflow-x: auto;
            max-width: 100vw; /* 限制容器宽度为视口宽度 */
        }

        /* 基础表格样式 */
        .excel-table {
            border-collapse: collapse;
            width: max-content; /* 让表格宽度适应内容，保证所有日期列都显示 */
        }

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

        .excel-table th {
            background-color: #f2f2f2;
        }

        /* 关键：固定姓名列 */
        .fixed-column {
            position: sticky;
            left: 0;
            background-color: #f2f2f2; /* 设置背景色，避免滚动时被后面单元格覆盖 */
            z-index: 1; /* 确保固定列在滚动内容上方 */
        }

        /* 行悬停效果（可选，提升体验） */
        .excel-table tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table class="excel-table">
            <thead>
                <tr>
                    <th class="fixed-column">Name</th>
                    <th>Day 1</th>
                    <th>Day 2</th>
                    <th>Day 3</th>
                    <th>Day 4</th>
                    <th>Day 5</th>
                    <!-- 可以继续添加更多日期列，比如到Day 100 -->
                    <th>Day 98</th>
                    <th>Day 99</th>
                    <th>Day 100</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="fixed-column">Person 1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td class="fixed-column">Person 2</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td class="fixed-column">Person 3</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

核心原理说明 #

• 容器的overflow-x: auto：给表格外层套一个容器，开启横向滚动，当表格宽度超过容器宽度时，自动显示滚动条。
• 固定列的position: sticky：给姓名列的<th>和<td>都添加fixed-column类，设置position: sticky; left: 0，这样滚动时该列会固定在左侧。
• 背景色与z-index：必须给固定列设置背景色，否则滚动时后面的单元格会透过固定列显示出来；z-index:1保证固定列在滚动内容的上方。
• 表格宽度设置：用width: max-content让表格宽度自适应所有列的总宽度，确保所有日期列都能完整显示，不会被挤压。

为什么之前的嵌套表格方案容易出问题？ #

嵌套表格会导致两个表格的行高、列宽很难完美对齐，而且当内容变化时，需要手动调整两个表格的样式，维护成本很高。而sticky方案只用一个表格，天然保证了行高列宽的一致性，代码更简洁也更容易维护。

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