Search code examples
htmlcss

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...

Solution

  • 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.

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