Html CSS：表格单元格中带有绝对位置的神秘填充

在尝试将div元素绝对定位到表单元格中时，我遇到了一种奇怪的行为。为了实现绝对定位，我使用带有

位置：relative的包装器div元素：

HTML

<table>
    <colgroup>
        <col width="200px"></col>
        <col width="300px"></col>
    </colgroup>
    <thead>
        <tr>
            <th>Caption 1</th>
            <th>Caption 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="wrapper"><div class="abs">abs</div></div></td>
            <td>Content 2</td>
        </tr>
    </tbody>    
</table>


如您所见，包装器div和包含表单元格的顶部之间存在间隙。如果我将
abs
元素更改为
position:relative
，此间隙将消失

那么这个间隙是从哪里来的，我该如何防止它呢？
您必须将尺寸设置为wrapper

.wrapper {height: 30px;}


否则，
.wrapper
高度为0，表格单元格有
垂直对齐：中间默认情况下，蓝色边框位于单元格的中间。
< p>因为您在正常页面流中使用，>代码>。包装器< /代码>不再有任何内容，因此它自己崩溃，而你所看到的只是它上面的边框。

它位于单元格的垂直中间，因为
middle
是
td
和
th
s的默认
vertical align
样式

如果我们在混合物中添加一个非断裂空间，则可以更好地证明这一点：


表格{
宽度：100%；
边界塌陷：塌陷；
表布局：固定；
}
th，td{
边框底部：1px纯黑；
填充：0；
保证金：0；
}
.包装纸{
背景颜色：绿色；
位置：相对位置；
宽度：100%；
边框顶部：1px纯蓝色；
}
.腹肌{
位置：绝对位置；
排名：0；
边际：0px；
填充：0px；
背景色：红色；
}

标题1
标题2
防抱死制动系统
内容2
谢谢，这很好地回答了这个问题，解决了问题。不幸的是，这并不能解决我的实际问题。我原以为小提琴能很好地复制出来，但显然不行。但无论如何，这应该是正确的答案。我很高兴我能帮上忙。你能谈谈你的大问题吗？如果合适的话，也许会问另一个问题？是的，只要我设法用
vertical align:top。到目前为止，我还不能做到这一点。
.wrapper {height: 30px;}