我的代码在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/