Css 表行跨度中的Div未使用全高

我有一个非常普通的HTML

，其中一个单元格通过

行span

跨越多行。在这个牢房里，我有一个

，我想占据整个牢房的高度，但就我的一生而言，我似乎无法理解它。这似乎与提到的内容相似，但也似乎很简单，也许我只是没有想清楚

以下是我的HTML的精简版本：

<table>
    <tr>
        <td class="a" rowspan="2"><div>A</div></td>
        <td class="b"><div>B</div></td>
    </tr>
    <tr>
        <td class="c"><div>C</div></td>
    </tr>
</table>

还有一个。以下是我得到的和我想要得到的：

真正奇怪的是，如果我使用Chrome的inspector将

更改为

display:inline block

，然后将其设置回

display:block

，它实际上看起来就像我想要的那样

（不，对于这个项目来说，从表中切换不是一个选项，还有其他代码没有显示要求这样做。）

选项1 只需添加

溢出：auto到您的
div
CSS

选择2
或者，您需要定义桌子的高度，以便孩子能够计算出它的100%是100%

选择3
唯一的其他方法是在
td
元素上设置
position:relative
，然后为子
div
选项1设置
position:absolute
！非常感谢。几年后，选项1似乎不再适用于最新的Chrome。您的演示小提琴呈现的效果与初始问题的“实际”屏幕截图一样。
td
{
    vertical-align: top;
}
td.a div
{
    background-color: #f00;
    height: 100%;
}

td
{
    vertical-align: top;
}
td.a div
{
    background-color: #f00;
    height: 100%;overflow:auto;
}