html - 增加整个表格高度时，使表格行高不变

Question

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

问题

是否可以让一行(在我的示例中是带有标题的行)始终保持在最小高度？作为类比，我将其视为指定 flex-grow: 0在 Flex 元素上。

无固定高度

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

代码

FIDDLE使用示例代码进行处理。屏幕截图如下。

我想让右表中的第一行 ( .Table-Row--NotResizable ) 与左表中的第一行具有相同的高度。

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，则浏览器会将其调整为适合内容所需的大小。表格内容必须适合表格单元格，因此高度不会更小，并且由于任何(非空)内容都将高于 1px，因此它也不会大于所需的最小值。