Force images to overflow in table cells

Problem

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

Problem courtesy of: Stylock

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

Solution courtesy of: xec

Discussion

You're asking for an element's background to escape into the foreground. This isn't possible. An element's background can only be as large as the element itself.

To make the .logo image the same dimensions as the containing cell you could make use of the background-size property, but this isn't supported in older browsers.

Discussion courtesy of: James Donnelly

Set Static Width to td's and set overflow to visible and text-wrap:nowrap; or word-break to keep all for text in tables

td{
width:100px;
max-width:100px;
overflow:visible
text-wrap:nowrap;  //for text
word-break:keep-all;  // for text
}
Discussion courtesy of: Sahil Popli

This recipe can be found in it's original form on Stack Over Flow.