html 单元格位置,html – CSS：在表格单元格中使用绝对位置的神秘填充

当我尝试在表格单元格中绝对定位div元素时,我遇到了一种奇怪的行为.为了实现绝对定位,我使用了一个包含div元素的位置：relative：

Caption 1Caption 2

abs

Content 2

CSS

table {

width: 100%;

border-collapse: collapse;

table-layout: fixed;

}

th, td {

border-bottom: 1px solid black;

padding: 0;

margin: 0;

}

.wrapper {

background-color: green;

position: relative;

width: 100%;

border-top: 1px solid blue;

}

.abs {

position: absolute;

margin: 0px;

padding: 0px;

background-color: red;

}

如您所见,包装器div与包含表格单元格的顶部之间存在间隙.如果我将abs元素更改为position：relative,则此间隙将消失.

那么这个差距来自哪里,我该如何预防呢？