IE doesn't respect td width

Question

I have a table based layout which is divided into four columns, the two of them for padding purposes. In most browsers it works fine, but at least on on IE9 in both normal and compatibility mode the cells aren't the size they're supposed to be.

I've tried defining the width as both attributes and CSS styles but neither seems to help. See fiddle for a demonstration.

I want:

+------------------------------------------+
|  320          | 20 | 39   |  320         |
|               |    |      |              |
+------------------------------------------+

I get: (rounded, values are decimals)

+------------------------------------------+
|  324          | 19 | 34   |  321         |
|               |    |      |              |
+------------------------------------------+

With the actual content instead of the placeholder stuff the difference is even more exaggerated, the leftmost column being 357 and the rightmost 299 pixels wide.

I originally had only two columns with padding on the edges, but switched to the current version as an attempted fix. It had no effect.

This is for an HTML newsletter so using a tableless layout is not an option.

Answer 1

In the past, I've found this to be a virtually impossible issue to resolve unless you leave one of your table elements without a fixed width.

If you do that, then I've found that column will be the one that resizes, while the rest should take the size you ask for.

It's not ideal, but at least it's reasonably predicable and controllable.