I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative:
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>
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;
}
The gap between the wrapper div and the top of the containing table-cell is puzzling. This gap disappears when changing the abs element to position:relative.
What causes this gap and how can it be avoided?