如何实现表格响应式？已尝试多种方法仍未解决

需求 #

表格内所有数据不换行，当单元格无法进一步压缩时，表格外层显示横向滚动条。

问题分析 #

当前代码存在两个核心问题导致异常：

1. HTML结构错误：表头部分嵌套了<tr>标签，浏览器解析错误结构会导致列宽计算混乱，引发内容挤压。
2. CSS布局冲突：使用table-layout: fixed强制固定列宽，同时又通过JS设置width: 100%/auto实现类似flex的自适应，两种布局逻辑冲突，导致单元格内容被截断挤压。

修复方案 #

1. 修复HTML结构错误 #

移除表头部分嵌套的外层<tr>，正确的表头结构应该是单个<tr>包含所有<th>：

<div class="container">
    <table>
        <!-- 移除嵌套的外层<tr>，保留正确的表头行 -->
        <tr class="header">
            <th class="header-text" style="width: auto">ID</th>
            <th class="header-text side-padding" style="width: auto">Title</th>
            <th class="header-text side-padding" style="width: auto">Category</th>
            <th class="header-text side-padding" style="width: auto">Date Created</th>
            <th class="header-text side-padding align-vertical" style="width: auto">Size</th>
            <th class="header-text align-vertical" style="width: auto">Priority</th>
        </tr>
        <!-- 数据行保持不变 -->
        <tr class="data-row">
            <td class="data-text">#1</td>
            <td class="data-text side-padding">
                <div>
                    <p class="data-text">Qui dolorem sit corrupti....</p>
                    <span class="data-text-small">Updated on 02/08/2022</span>
                </div>
            </td>
            <td class="data-text side-padding">Maintenance</td>
            <td class="data-text side-padding">
                <div>
                    <p class="data-text">4th January, 2018</p>
                    <span class="data-text-small">7:31 pm</span>
                </div>
            </td>
            <td class="data-text side-padding align-vertical align-horizontal">
                <div class="size-tab">Small</div>
            </td>
            <td class="data-text align-vertical align-horizontal">
                <div class="priority-circle" style="background-color: var(--grey-darkest)"><span>5</span></div>
            </td>
        </tr>
        <!-- 其他数据行重复部分省略 -->
    </table>
</div>

2. 调整CSS布局逻辑 #

修改表格和容器的关键样式，解决布局冲突：

.container {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow-x: auto;
    /* 确保容器不会限制表格的最小宽度，内容过多时表格可自然撑开 */
    min-width: fit-content;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    white-space: nowrap;
    /* 移除fixed布局，改用auto让表格根据内容自适应列宽 */
    table-layout: auto;
    /* 表格宽度随内容自动调整 */
    width: auto;
    /* 确保内容较少时表格占满容器宽度 */
    min-width: 100%;
}

/* 保留其他原有样式不变 */

3. 移除冲突的新增样式 #

删除后来添加的.table-container和.table样式，避免和现有.container、table样式冲突。

修复原理 #

• 修正HTML结构后，浏览器能正确计算每列的宽度；
• 改用table-layout: auto让表格根据内容自动分配列宽，配合white-space: nowrap保证内容不换行；
• 容器设置overflow-x: auto，表格设置min-width: 100%，实现“内容少则占满容器，内容多则显示滚动条”的效果。

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