Table-cell width in IE

[UncleRonin]

I've found that alot of people are aware of the fact that IE plays havoc with a standards compliant page. IE just doesn't play nice. My current pet peev is the fact that IE keeps sizing table-cells incorrectly.

Take this code for example. What should happen is the first column should have its width set according to td.short { width: 50px; } BUT because the cells above it span multiple cells, IE feels that this width is not enough and COMPLETELY DESTROYS the desired table layout. I've tried using a layout of 3 columns as well as the 4 columns used currently but IE still specifies a width <> 50px for the first column. It simply disregards the width as though it doesn't exist.

<TABLE cellspacing="5" align="center" width="500">
<TR>
<TD colspan="4">Edit</TD>
</TR>
<TR>
<TD colspan="4"></TD>
</TR>
<TR>
<TD class="short">Date:</TD>
<TD>Text</TD>
<TD colspan="2">
<INPUT tabindex="4" name="Submit" type="submit" class="button" value="Edit" />
</TD>
</TR>
</TABLE>

I've read that IE reads the entire table before it displays it so I'm gathering that this could be why. Also, since IE mangles/ignores max-/min-width properties without much hacking and slashing I can't use that (if it even applies to table-cells).

Is there no way to force IE to use the given cell widths? I've tried using table-layout: fixed but then IE gets too strict and you have to specify EVERY width in a table to make it display correctly. There must be some or other workaround. Anybody have any ideas?

 

[JohnH]

I saved this table in a Html file and set the CSS, also created a 50px image as ruler, it looks pretty accurate to 50px to me.

 

[UncleRonin]

It will because there is no text in the second row. Depending on the amount of text in the second row, IE will adjust the widths of the coresponding columns. If you want to test it, just use text of varying lengths, from about half a row worth to nearly two thirds, and you'll see IE resize the columns. In FF it will work perfectly, most probably in IE 7 as well, but in IE 6 it will resize and everything becomes malaligned. This is because IE 6 draws tables as it reads them. It DOES NOT honour table width specifications.

Another problem is that if cell text is horizontally center aligned, it often gets offset from the center because of the realignment as well. My guess is that once IE has drawn a row and aligned the text it doesn't realign the text if the column width changes. I have about 20 - 30 pages using tabular reports and unless i set width combinations (through trial and error) IE will often mangle text-alignment.