表行填充剩余高度Chrome与Firefox
表行填充剩余高度Chrome与Firefox
提问于 2019-09-25 18:35:13
我有一个代码，它在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>
回答 2
Stack Overflow用户
发布于 2019-09-25 18:57:47
根据这个例子https://www.w3schools.com/tags/att_td_rowspan.asp，我像这样重写你的代码。希望这能对你有所帮助。
<html>
<head>
<style>
.custom th {
height: 200px;
background: red;
}
.custom td {
height: 70px;
background: blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Category</th>
<th>Family</th>
<th>Info</th>
</tr>
<tr class="custom">
<th rowspan="3">Category 1</th>
<td>Family 1</td>
<td>Many different things</td>
</tr>
<!-- Add 2 spacer for enough 3 row because rowspan = 3 -->
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="custom">
<th rowspan="4">Category 2</th>
<td>Family 2</td>
<td>Other things</td>
</tr>
<tr class="custom">
<td>Family 3</td>
<td>Way more things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
Stack Overflow用户
发布于 2019-09-25 19:35:13
我认为问题在于你如何构建你的表格，但我没有使用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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58096464
复制相关文章
相似问题
腾讯云开发者
