如何实现HTML/CSS表格列宽25%并支持横向滚动？

原代码的核心问题是：th, td的width:25%是基于表格宽度计算的，而表格设置了min-width:100%，当列数超过4时，表格会被容器限制在100%宽度内，导致列宽被强制压缩，无法维持25%的比例。

以下是调整后的代码，完全符合需求：

CSS 代码 #

.table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 定义每列宽度为容器的1/4 */
    --col-width: calc(100% / 4);
}
table {
    width: fit-content; /* 表格总宽度随列数自动扩展 */
    min-width: 100%; /* 列数≤4时，表格撑满容器 */
    border-collapse: collapse;
}
th, td {
    width: var(--col-width);
    min-width: var(--col-width); /* 强制列宽不小于容器的25% */
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    box-sizing: border-box; /* 避免padding/border额外占用宽度 */
}

HTML 代码（无需修改，直接复用） #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 上面的CSS代码放在这里 */
    </style>
</head>
<body>
    <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>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                    <td>Data 4</td>
                    <td>Data 5</td>
                    <td>Data 6</td>
                    <td>Data 7</td>
                    <td>Data 8</td>
                </tr>
                <!-- More rows as needed -->
            </tbody>
        </table>
    </div>
</body>
</html>

关键逻辑说明 #

1. --col-width变量：直接将每列宽度绑定到容器宽度的1/4，确保无滚动状态下刚好显示4列
2. table: width: fit-content：让表格总宽度等于所有列宽之和，当列数超过4时，表格总宽度会超出容器，触发横向滚动
3. table: min-width:100%：保证列数≤4时，表格自动撑满容器，每列均匀分配25%宽度
4. th/td: min-width：强制列宽不会因内容过长或容器压缩而变小，始终保持容器的25%宽度

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