表行填充剩余高度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>
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58096464
复制相关文章
相似问题
腾讯云开发者
