IE doesn't respect td width

html internet-explorer tablelayout

12,473

Solution 1

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.

Solution 2

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.

Solution 3

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.

12,473

Author by

Kaivosukeltaja

Web Developer since 2000, currently using JavaScript, React, React Native, (S)CSS. In previous life lots of PHP, MySQL, Symfony, Drupal. Dabbling with Python and Django. Beer geek, whisky enthusiast, bass player, photographer.

Updated on June 05, 2022

Comments

Kaivosukeltaja almost 2 years
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.
- Brad Christie almost 13 years
  
  I don't see the issue, but I'm also running IE9. -- As an aside, a table really isn't the ideal tag to use for this kind of content. You really should be styling divs and maybe use the float style.
- Freesnöw almost 13 years
  
  Yes, in truth, tables are a bad thing to use because of the way they work. You can guarantee a good result with divs, however.
- Kaivosukeltaja almost 13 years
  
  Thanks, but have you tried using floated divs in HTML email? They won't work in most email clients.
- KyleMit over 9 years
  
  For me, this issue was related to a bug in the browser definition files. Making sure the most recent .NET framework was installed cleared up the issue.
Kaivosukeltaja almost 13 years

The fiddle contains the HTML, the CSS is not relevant as the problem can be reproduced without it. There is only one 1px border in the 20px wide column, and no margin or padding or any of them.
Kaivosukeltaja almost 13 years

Oh, and none of the elements inside the cell exceed 320px.
Kaivosukeltaja almost 13 years

Yes, emptying all the content will make the cells the right size, but it kind of defeats the purpose of the whole newsletter... :)