如何让表格任意非末尾列占满剩余可用空间且不挤压其他列

核心修改点 #

• 新增table-layout: fixed表格规则：启用表格固定布局模式，列宽仅由表头定义的宽度规则决定，完全不受单元格内容长度影响，是实现内容超长不撑宽列的核心属性
• 修正布局属性错误：移除table的display:block、.orderCell的display:inline-block设置，恢复原生table-cell布局逻辑，保证列宽计算符合预期
• 可选体验优化：给可变宽列添加text-overflow: ellipsis规则，超出的文本内容自动显示省略号

该方案无需依赖固定容器宽度或百分比列宽设置，表格容器动态调整尺寸时，可变宽列会自动适配扣除固定列后的剩余空间，完全符合业务需求。

完整修改后代码 #

<style>
    .container {
        position: relative;
        width: 500px;
        height: 200px;
        display: inline-block;
        font: 16px arial;
        border: 1px solid steelblue;
        background-color: lightgoldenrodyellow;
    }

    .variCell {
        text-align: left;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .orderCell {
        width: 65px;
        text-align: right;
    }


    table {
        position: absolute;
        table-layout: fixed;
        margin-right: 10px;
        border: none;
        overflow: hidden;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    thead {
        position: relative;
        display: table-header-group;
        height: 25px;
        max-height: 25px;
        background-color: #93aed2;
        text-align: center;
        font-size: 14px;
        line-height: 25px;
        white-space: nowrap;
    }

    tbody {
        position: relative;
        border: none;
        overflow: hidden;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }
</style>

<div class="container">
    <table>
        <thead>
            <tr>
                <td class="orderCell">
                    Col 1
                </td>
                <td class="variCell">
                    Col 2
                </td>
                <td class="orderCell">
                    Col 3
                </td>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td class="orderCell">
                    1
                </td>
                <td class="variCell">
                    Please use available space only.
                </td>
                <td class="orderCell">
                    100
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="container">
    <table>
        <thead>
            <tr>
                <td class="orderCell">
                    Col 1
                </td>
                <td class="variCell">
                    Col 2
                </td>
                <td class="orderCell">
                    Col 3
                </td>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td class="orderCell">
                    1
                </td>
                <td class="variCell">
                    Please use available space only. Do not push the next column out of the table.
                </td>
                <td class="orderCell">
                    100
                </td>
            </tr>
        </tbody>
    </table>
</div>

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