html - 表格行填充剩余高度 Chrome vs. Firefox

Question

我有一段代码在 Firefox 和 Chrome 上表现不同。

我想要的行为是 Firefox 上的行为。我想在 Chrome 上重现它但没有成功。

在下面的代码中，想法是 tr class="spacer" 填充 tr class="family" 行下方的剩余高度，这样它们就可以显示在 tr class="category" 行的顶部。

在 Chrome 上这是完全不一致的...

.category th {
  height: 200px;
  background: red;
}

.family {
  height: 70px;
  background: blue;
}

<table>
  <tbody>
    <tr>
      <th>Category</th>
      <th>Family</th>
      <th>Info</th>
    </tr>

    <tr class="category">
      <th rowspan="3">Category 1</th>
    </tr>
    <tr class="family">
      <td>Family 1</td>
      <td>Many different things</td>
    </tr>
    <tr class="spacer">
      <td colspan="3"></td>
    </tr>

    <tr class="category">
      <th rowspan="4">Category 2</th>
    </tr>
    <tr class="family">
      <td>Family 2</td>
      <td>Other things</td>
    </tr>
    <tr class="family">
      <td>Family 3</td>
      <td>Way more things</td>
    </tr>
    <tr class="spacer">
      <td colspan="3"></td>
    </tr>
  </tbody>
</table>

Answer 1

我认为问题在于您如何构建表格，但我没有使用 html 表格的解决方案。

我宁愿使用 css 网格属性。它需要多一点代码，但在我看来，它提供了更多选项、更好的响应能力等等。

我写了一些代码来显示你想要的表格。当然，您可以修改代码以使其更像您计划的那样工作，但这是一个基本结构。

HTML:

<div class="grid">
  <div>Category</div>
  <div>Family</div>
  <div>Info</div>

  <div class="first">
    <div class="grid-category">Category 1</div>
    <div class="family">Family 1</div>
    <div class="family">Many different things</div>
  </div>

  <div class="second">
    <div class="grid-category">Category 2</div>
    <div class="family">Family 2</div>
    <div class="family">Many different things</div>
    <div class="family">Family 3</div>
    <div class="family">Many different things</div>
  </div>
</div>

CSS:

.grid-category {
  min-height: 200px;
  background: red;
}

.family {
  height: 70px;
  background: blue;
}

.grid {
  display: inline-grid;
  grid-gap: 4px;
  grid-template-columns: auto auto auto;
  grid-template-rows: 16px auto auto;
}

.first,
.second {
  display: grid;
  grid-column: 1 / 4;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

.grid-category {
  grid-row: 1 / 4;
}