Stylock Stylock - 5 months ago 26
HTML Question

Force images to overflow in table cells

How to force images to overflow in table cells without expanding the cells?

EDIT:



Sorry, I'll provide some more information. This is the table:

<table class="content">
<col width="200px" />
<col width="560px" />
<col width="200px" />
<tr>
<td colspan="3" class="logo"></td>
</tr>
</table>


CSS:

.logo
{
height: 120px;
background: url('img/wallpaper.png') center;
}


I thought there would be a simple solution...

xec xec
Answer

If you use an <img> tag instead of a background image, you could remove it from document flow with position: absolute;

html

<td class="logo">
    <img src="img/wallpaper.png">
</td>

css

.logo img {
    position: absolute;
}

This will let the image overflow the cell, but creates other side-effects you would need to deal with. Update top or bottom accordingly to keep the image in place.

Adjusted css

.logo img {
    position: absolute;
    top: 15px;
}

Check out http://jsfiddle.net/QMNRp/1/