When laying out fixed width tables you might notice Firefox and Internet Explorer do not agree even when you specify a fixed with for each column. This can cause havoc when creating cross browser pixel perfect reports. The good news is, it is easily remedied.
The root cause of this is Internet Explorer, of course. The reason why IE ‘improvises’ the width of tables goes way back to the Netscape vs IE days. Netscape was the first widely adopted browser and the quality of the HTML code put out in those days would rotate the skull of a CSS / Standards focused developer. In order to cope with the spurious code, Netscape ‘fixed’ the HTML so it could render properly.
Being as IE was the second class citizen in those days, IE simply had to follow suit. There was no way IE would be adopted if it ‘broke’ currently implemented websites so the IE team wrote their own ‘fixing’ code for HTML source.
Fast forward a few years. Microsoft is the dominant browser and through it all, continued to keep IE backwards compatible. Backwards compatibility is an honorable goal, to be true, but it can drive a person nuts when they specify fixed widths on a table and those widths are not respected.
To tell Internet Explorer that you really MEAN those widths, simply add this line to your CSS file:
table-layout: fixed;
There, doesn’t that look much better?