Question

This may seem like a blast from the past but due to project constraints I am stuck with quirks mode and tables…

The tables that i’m dealing with have a single image in each cell where all the cells should be the same size. The tables width and height are set as percentages of a parent container.

The problem is the images don’t resize down, they stay at their original size seemingly no matter what I do. Then the table doesn’t adhere to its set size, it has resized to hold all of the images. In standards mode I believe ‘width: 100%’ on the image gets closer to what I want to achieve.

I’m considering a javascript solution which loops over each image calculating what their size should be and resizing manually. But this is probably going to cause a bit of a loading time at the start which isn’t ideal.

Edit:

I have written a basic example at JSBin. What I want to achieve is to be able to set the size of the table and have the images resize, whether growing or shrinking to their cell.

The 4th jsbin revision uses the dummy images.

Answer 1

I think I’ve solved this.

I’ve tested this demo in Chrome, Firefox, Internet Explorer, Safari, Opera; they all render consistently.

• I had to add a wrapper div in each cell. I know this isn’t awesome, but it had to be done to make it work in Chrome.
• I added table-layout: fixed to make it work in Internet Explorer.

Live Demo

CSS:

#mycontainer {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
#mytable {
    height: 50%;
    width: 50%;
    table-layout: fixed;
}
#mytable div {
    width: 100%;
    height: 100%;
}
#mytable img {
    width: 100%;
    height: 100%;
}

HTML:

<div id="mycontainer">
    <table id="mytable" cellpadding="0" cellspacing="0">
        <tr>
            <td><div><img src="http://dummyimage.com/28x28/000/fff.png&text=Dummy" /></div></td>
            ...
        </tr>
        ...
    </table>
</div>