CSS 灵活的表格标题

Question

.rowHeader1调整表格大小时，我无法缩小宽度。

.rowHeader1并.rowHeader2包裹在一个弹性容器中。 .rowHeader1应该增长和收缩，但不应小于60px宽度，而.rowHeader2应始终保持60px宽度。

在不删除 Table 语义标签的情况下，是否可以使行标题正确弯曲？

body {

    background-color: #444;

}

table {

    border: 1px solid white;

    color: white;

    width: 100%;

}

tr, th, td {

    border: 1px solid white;

}

tbody td {

    white-space: nowrap;

}

tbody th {

    display: flex;

}

:root {

    --MIN-SIZE: 60px;

}

.rowHeader1 {

    flex: 1 1 var(--MIN-SIZE);

    border: 1px solid red;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    text-align: left;

}

.rowHeader2 {

    flex: 0 0 var(--MIN-SIZE);

    border: 1px solid red;

}

<table>

    <thead>

        <tr>

            <th>Column Header</th>

            <th>Data</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th>

                <div class="rowHeader1">Row Header 1 Row Header 1</div>

                <div class="rowHeader2">RH 2</div>

            </th>

            <td>

                Some Table Data Some Table Data Some Table Data

            </td>

        </tr>

    </tbody>

</table>

Answer 1

如果你将 的flex-shrink值设置.rowHeader1为0并将它的宽度设置为 60px，它将增长以填充空间但不会收缩小于 60px：body {&nbsp; background-color: #444;}table {&nbsp; border: 1px solid white;&nbsp; color: white;&nbsp; width: 100%;}tr,th,td {&nbsp; border: 1px solid white;}tbody td {&nbsp; white-space: nowrap;}tbody th {&nbsp; display: flex;}:root {&nbsp; --MIN-SIZE: 60px;}.rowHeader1 {&nbsp; flex: 1 0 var(--MIN-SIZE);&nbsp; width: 60px;&nbsp; border: 1px solid red;&nbsp; white-space: nowrap;&nbsp; overflow: hidden;&nbsp; text-overflow: ellipsis;&nbsp; text-align: left;}.rowHeader2 {&nbsp; flex: 0 0 var(--MIN-SIZE);&nbsp; border: 1px solid red;}<table>&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Column Header</th>&nbsp; &nbsp; &nbsp; <th>Data</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; <div class="rowHeader1">Row Header 1 Row Header 1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="rowHeader2">RH 2</div>&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; Some Table Data Some Table Data Some Table Data&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>