具有 rowspan 的 TD 的高度大于内容（嵌套表）：嵌套表的边框放置有 1px 的差异模仿外部表的相同行高
Hil*_*ant 6 html css html-table
我有一个固定行高的外表（在本例中为 24px）。我想嵌套一个表格来添加一些内容，但也想模仿里面的行高和边框。但是这里有 1px 的差异：
我无法解释这一点，但感觉这与 rowspan 以及带有 flexbox 的嵌套表有关。
问题：我想知道innerTable 的预期高度为72px，但父td.itemblock 的高度为72.8px。有人能告诉我这种差异的原因吗？是否有一些设置可以防止这种情况？
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
table {
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
width: 100%;
font-size: 10px;
border-spacing: 0;
}
tr {
height: 24px;
}
td {
border-bottom: 1px solid black;
padding: 0;
vertical-align: top;
box-sizing: border-box;
}
.firstColumn {
width: 24px;
border-right: 1px solid black;
}
td.small {
width: 12px;
border-right: 1px solid black;
}
.title {
flex-grow: 1;
display: block;
text-overflow: ellipsis;
overflow: hidden;
height: 24px;
}
.item {
display: flex;
background-color: lightblue;
padding-left: 4px;
padding-right: 4px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 1px;
height: 100%;
}
.innerTable td {
border-bottom: 0;
border-right: 0;
width: auto;
}
.itemCell {
position: relative;
}
.innerTable td.blockCell {
border-bottom: 1px solid black;
}<html>
<head>
</head>
<body>
<table class="outerTable">
<tr>
<td rowspan="2" class="firstColumn">0</td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td></td>
<td class="small"></td>
<td rowspan="3" class="itemBlock">
<table class="innerTable">
<tr>
<td rowspan="3" class="itemCell">
<div class="item">
<div class="title">some content</div>
</div>
</td>
<td class="blockCell"></td>
</tr>
<tr>
<td class="itemCell blockCell">
<div class="item">
<div class="title">other content</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td rowspan="2" class="firstColumn">1</td>
<td></td>
<td class="small"></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td></td>
<td class="small"></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td rowspan="2" class="firstColumn">2</td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
</table>
</body>
<html>更新：
- 它已确认在 Mac Chrome 和 Safari 中发生，可能也在其他浏览器中发生（使用 Run Code Snippet 检查结果）
- 无论是否使用浏览器放大/缩小都会发生这种情况。
根据建议，我能够组装它，看起来它正在工作。变化是：
- 使用 box-shadows 而不是 border-bottom
- 设置内表高度
- 将 Item div 的高度设置为 calc(100% - 0.75px)
虽然看起来我有一个“hacky”的解决方案，但我仍然没有解释！任何html表格专家？
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
table {
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
width: 100%;
font-size: 10px;
border-spacing: 0;
}
tr {
height: 24px;
}
td {
box-shadow: 3px -3.5px 0px -3px rgba(0, 0, 0, 1) inset;
padding: 0;
vertical-align: top;
box-sizing: border-box;
}
.firstColumn {
width: 24px;
border-right: 1px solid black;
}
td.small {
width: 12px;
border-right: 1px solid black;
}
.title {
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
.innerTable td {
border-bottom: 0;
border-right: 0;
width: auto;
height: 72px;
}
.itemCell {}
.item {
height: calc(100% - 0.75px);
background: lightblue;
display: flex;
background-color: lightblue;
padding-left: 4px;
padding-right: 4px;
}
.innerTable td.blockCell {
box-shadow: 3px -3.5px 0px -3px rgba(0, 0, 0, 1) inset;
}<html>
<head>
</head>
<body>
<table class="outerTable">
<tr>
<td rowspan="2" class="firstColumn">0</td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td></td>
<td class="small"></td>
<td rowspan="3" class="itemBlock">
<table class="innerTable">
<tr>
<td rowspan="3" class="itemCell">
<div class="item">
<div class="title">some content</div>
</div>
</td>
<td class="blockCell"></td>
</tr>
<tr>
<td class="itemCell blockCell">
<div class="item">
<div class="title">other content</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td rowspan="2" class="firstColumn">1</td>
<td></td>
<td class="small"></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td></td>
<td class="small"></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td rowspan="2" class="firstColumn">2</td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
<tr>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
<td></td>
<td class="small"></td>
</tr>
</table>
</body>
<html>1. 原因
使用box-sizing:border-box仅与具有边框的父单元格相关 - 但嵌套表不关心它的父单元格的边框，只关心它自己的边框。
在普通表格中，单元格的边框是单元格的一部分，因此在计算单元格高度时需要考虑：
<tr>
<td></td>
<td></td>
</tr>
对于嵌套表格，边框属于包含表格的单元格，因此不可用于计算单元格的高度：
<tr>
<td rowspan="2">
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
2. 解决方案
找到解决方案比确定原因更难。
我的想法是
.innerTable{
- 使用边距拉伸内部表格以覆盖包含单元格的边框：
margin-top: -1px;
margin-bottom: -1px;
- 然后在内部表格上绘制边框，使其再次看起来像包含单元格有边框：
border-top: 1px solid black;
border-bottom: 1px solid black;
}
仅设置margin-bottom（或者更糟糕的是，设置margin-bottom:-2px）没有帮助 -border-collapse: collapse;意味着两个单元格共享其边框，但不会改变它们最终在两侧都有边框，因此需要计算两个边框的大小。
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>