我的代码在Firefox和Chrome上的行为有所不同。
我想要的行为是Firefox上的行为。
我想在Chrome上重现它,但没有成功。

在下面的代码中,想法是tr class="spacer"填充tr class="familly"行下方的剩余高度,因此它们将显示在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>Familly 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>Familly 2</td>
      <td>Other things</td>
    </tr>
    <tr class="family">
      <td>Familly 3</td>
      <td>Way more things</td>
    </tr>
    <tr class="spacer">
      <td colspan="3"></td>
    </tr>
  </tbody>
</table>

最佳答案

我认为问题在于您如何组织表格,但是我没有使用html表格的解决方案。

我宁愿使用css grid属性。它需要更多的代码,但在我看来,它提供了更多的选择,从而可以提供更好的响应性等等。

我写下了一些代码来显示与表相同的代码。当然,您可以修改代码以使其按预期工作,但这是一个基本结构。

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">Familly 1</div>
    <div class="family">Many different things</div>
  </div>

  <div class="second">
    <div class="grid-category">Category 2</div>
    <div class="family">Familly 2</div>
    <div class="family">Many different things</div>
    <div class="family">Familly 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;
}

关于html - 表格行填充了Chrome和Firefox的剩余高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58096464/

10-10 18:28
查看更多