CSS 灵活的表头答案

【问题标题】：CSS Flexible Table HeadersCSS 灵活的表头
【发布时间】：2020-08-07 11:25:54
【问题描述】：

调整表格大小时，我无法缩小 .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>

【问题讨论】：

标签： javascript html css html-table flexbox

【解决方案1】：

如果您将.rowHeader1 的flex-shrink 值设置为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>

【讨论】：