当增加整个 table 高度时，使 table 行高不变

Question

当我增加 table 高度时，所有行的大小都会调整，额外的高度会平均分配。其中。

问题

是否可以让一行（在我的示例中是 headers 的行）始终保持在最小高度？作为类比，我将其视为在 Flex 项目上指定 flex-grow: 0。

无固定高度

我不想让该行的高度固定（例如设置在上面 height: <fixed value in px>），只是让它的高度成为呈现所有内容的自然最小值。

代码

FIDDLE 以及要处理的示例代码。屏幕截图如下。

我想让右边的第一行 table (.Table-Row--NotResizable) 与左边的第一行 table.

高度相同

HTML

<div class="TableDisplay">
  <table class="Table Table--Natural">
    <tr>
      <th>Artist</th>
      <th>Song</th>
    </tr>
    <tr>
      <td>Prince</td>
      <td>Kiss</td>
    </tr>
      <tr>
      <td>Bob Dylan</td>
      <td>Idiot Wind</td>
    </tr>
  </table>

  <table class="Table Table--Full">
    <tr class="Table-Row--NotResizable">
      <th>Artist</th>
      <th>Song</th>
    </tr>
    <tr>
      <td>Prince</td>
      <td>Kiss</td>
    </tr>
      <tr>
      <td>Bob Dylan</td>
      <td>Idiot Wind</td>
    </tr>
  </table>
</div>

CSS

html,
body {
  height: 100%;
  min-height: 100%;
}

.TableDisplay {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
}

.Table {
  height: 100%;
  border-collapse: collapse;
}

.Table td,
.Table th {
  border: 1px solid black;
}

.Table--Full {
  height: 100%;
}

.Table--Natural {
  height: auto;
}

/* Make this row do not participate in height changes */
.Table-Row--NotResizable {
   /* ??? */
}

Answer 1

事实上，以 px 为单位的固定值正是您应该使用的值：

.Table-Row--NotResizable {
    height: 1px;
}

如果您将其设置为 1px，则浏览器会将其调整为恰好适合内容所需的大小。 Table 内容必须适合 table 单元格，因此高度不会更小，并且由于任何（非空）内容将高于 1px，它也不会大于所需的最小值。

当增加整个 table 高度时，使 table 行高不变

Making table row height not changing, when increasing the whole table height

html

css

css-tables

问题

无固定高度

代码

HTML

CSS