part II

note: unfinished demo stuff

table

  1. An article of furniture supported by one or more vertical legs and having a flat horizontal surface.
  2. ....
  3. An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form.

source: dictionary.com

The joy of tables in IE for Windows

A serious bug in IE5.x win (and IE6 win when in quirks mode) prevents the browser from correctly calculating the width of tables, as declared in percentages, when the parent container has no width explicitely declared. In that case, the browser calculates the width of the table as a percentage of the width of the viewport (body).

A basic solution is to wrap the table in a div, with the following css:

div.tablewrapper {width:100%;}

Alternatively: height can be used as well, but this should be hidden from other browers:

/* hide from other browsers \*/
	* html div.tablewrapper {height:1%;}
/* end hiding */

Then, IE for windows can correctly compute the width for the table. Or so I thought. There are still problems with this approach, as illustrated below.

[note] Additionaly, if given a table table-layout:fixed without declaring a width on that table, then (for IE 5.5 and higher - Windows only) it renders by default with a width of 100%. See this MS techdoc.

A series of tests illustrating the problems.

All Mac browsers (tested: Mozilla1.5, Netscape7.0, Safari, Omniweb 4.5, IE5.23) perform without any major problems (IE has a small problem as it doesn't understand the ‘border-collapse’ property, leaving a small gap between the cells, so does Safari on OS X10.2). So does Konqueror (running on X-Darwin, KDE 3.07). Only IE for Windows (both IE5.5 and IE6) still has some decent issues with the 2 column layout when a floated sidebar is used...... The ‘3px gap’ is rearing its ugly head.

Possible workarounds or solutions

Some attempts to control this bloody mess. Off course, simplest is not declaring a width on the table. But if you must, and your tables are next to a floated box.... then here I tried: Part 2.

References and links


File last updated: September 25, 2009.