Search code examples
htmlcsshtml-tableposition

Inner button with `position: absolute` will be placed outside a table

Html:

<br/><br/><br/><br/><br/>

<table>
<tr>
    <td class="container">
        <button class="del">delete</button>
    </td>
</tr>
</table>

<br/><br/><br/><br/><br/>

<div class="container">
<button class="del">delete</button>
</div>​

Css:

.container {
    position: relative;
    border: 1px solid red;
    height: 50px;
    width: 200px;
}

.del {
    position: absolute;
    top: 3px;
    right: 3px;
}​

Why the button inside a div will be placed on the top right corner of the div, but the one inside a td will be placed outside the table?

How to fix it?

See active demo: http://jsfiddle.net/Freewind/d6Tug/

Solution

  • I think it has something to do with the display style of a td, which is table-cell. If you set it to display:block, it will work correctly.

    Just add display:block to your .container style.

    As freewind pointed out, it would be better to use inline-block if it is supported in your browser for td since td's are usually displayed in a row.