使任意表列宽等于可用空间

Question

场景是我想要一个表格列来消耗所有可用的——不多也不少。这与使用 table td:last-child{width:100%} 类似，除了许多列不是最后一列。

下面的示例代码演示了我目前所拥有的。

第一个表格显示了数据合适时的结果。

第二个表显示了当我想改变其宽度的列有太多数据时会发生什么。它的作用是将最后一列推过去。我想要它做的是在考虑其他列并且将多余的文本视为溢出后，宽度仍然等于可用空间，这意味着它应该被隐藏。

请注意，在实际场景中，表格可以调整大小，因此任何依赖于将列宽设置为值或百分比的解决方案都可能不够用。

提前感谢您的帮助。

<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;
    }


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


    table {
        position: absolute;
        display: block;
        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>

Answer 1

我建议将table-layout:fixed 用于table 和white-space: break-word; 用于固定列并阻止表扩展。

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

    .variCell {
        position: relative;
        text-align: left;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .variCell span {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .orderCell {
        display: inline-block;
        width: 65px;
        text-align: right;
    }


    table {
        position: absolute;
        display: block;
        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;
    }

<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">
                    <span>Please use available space only. Do not push the next column out of the table.</span>
                </td>
                <td class="orderCell">
                    100
                </td>
            </tr>
        </tbody>
    </table>
</div>