I have a pair of nested tables which seem to work fine in Firefox, but in IE, Chrome and Safari, the display is all messed up.
Basically, the outer table is defined as having width=100%, and then each row in that table contains another table, which also has width=100%. Each inner table also contains one row, with the widths of all but one cell being defined as x number of pixels, and the last cell being defined without a width (so that it should fill the balance.
In Firefox this works exactly as I expect – the cell with the unspecified width occupies the remainder of the row. However, in IE, Safari and Chrome, the cell without a width seems to get a 0px width, and the other cells in the table split the remainder of the space.
The code can be seen over here (JSFiddle).
Take these three steps on each of the cells do not have a width set:
)line-height:0;font-size:0;I went through your fiddle and did this on the third cell in each row, except for the one with the actual content in it, and it rendered correctly.