CSS: mysterious padding with postion absolute in table-cell

css, html

Solution

Since you take `.abs` out of the normal page flow, `.wrapper` no longer has any content, so it collapses on itself and all you see is the border along the top of it.

It is in the vertical-middle of the cell because `middle` is the default `vertical-align` style for `td` and `th`s.

This can be better demonstrated if we add a non-breaking space in the mix:

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;
    top:0;
    margin: 0px;
    padding: 0px;
    background-color: red;
}

<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">&nbsp;
                    <div class="abs">abs</div>
                </div>
            </td>
            <td>Content 2</td>
        </tr>
    </tbody>
</table>

Problem

I'm experiencing a weird behaviour when trying to absolute position a div element inside a table-cell. To realise absolute positioning, I use 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; } ``` FIDDLE As you can see, there is a gap between the wrapper div and the top of the containing table-cell. This gap will vanish if I change the `abs` element to `position:relative`. So where does this gap come from and how do I prevent it?

Original source