CODEWITHSUNDEEP
htmlcsshtml-tableposition
Freewind
Freewind

Reputation: 198228

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/

Upvotes: 1

Views: 1311

Answers (2)

Gohn67
Gohn67

Reputation: 10638

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.

Upvotes: 1

Nick Rolando
Nick Rolando

Reputation: 26167

Giving an element position:absolute; places it relative to its containing block. Since a table cell is not considered a block container (unlike a div), it places it relative to the document body itself. top:3px; brings it 3px from the top border of the document and right:3px; moves it 3px from the right border.

http://reference.sitepoint.com/css/position

Upvotes: 1

Related Questions