Force images to overflow in table cells


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


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

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


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

I thought there would be a simple solution...

Problem courtesy of: Stylock


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


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


.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

Solution courtesy of: xec


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

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.