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 {

  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 0 var(--MIN-SIZE);

  width: 60px;

  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>