IE doesn't respect td width

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. S开发者_运维百科ee 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.

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.

Would help to see your CSS and HTML. But don't forget borders count when measuring the total width of a table.

margin + border + padding + width = real width.

Also, make sure you don't have any element in one of those cell that is bigger than the cell width.

I finally found a solution to the problem. The four cells themselves were fine, but this code containing the newsletter heading and ingress broke it:

<tr><td colspan="4">Some long text here</td></tr>

I changed it to this and it started working:

<tr><td colspan="4" width="700">Some long text here</td></tr>

The wide column's width is 700px whether or not I force it, but if I don't, the width of the single column cells gets messed up. I consider this a clear bug in IE.

<table width="699" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="320" height="50" valign="top"><!--test-->&nbsp;</td>
    <td width="20" valign="top"><!--test-->&nbsp;</td>
    <td width="39" valign="top"><!--test-->&nbsp;</td>
    <td width="320" valign="top"><!--test-->&nbsp;</td>
  </tr>
</table>

this should work