The first row in all tables use the same style - bar has a width of 100px, baz has a width of 200px and foo has no width set (so it should take all that's left). The second row has a colspan of 3 and contains a single div with a width set on it. The problem is that with IE, certain widths of the div can cause the widths of the bar and baz columns to render incorrectly.

Testing this with various browsers, it renders correctly in Firefox (1.0.6 and 1.5 beta), Safari 1.3.1, however, it renders incorrectly in Internet Explorer (5.01, 5.5, 6.0), Internet Explorer 5.2 Mac, and Opera 8.0.

Setting the width to small value (eg. 200px) is fine:
foo bar baz
foo
Make it larger (eg. 600px) and it breaks:
foo bar baz
foo
Setting the width as a percentage works fine:
foo bar baz
foo
In this case, a 332px width seems to be the largest it can go before it freaks out:
foo bar baz
foo
And with a 333px width, IE breaks:
foo bar baz
foo
Set table-layout: fixed as suggested by Bruno Fassino on css-discuss:
foo bar baz
foo