Question

I have a table with 3 columns where the third column is larger by 6 then the other columns.
Here is my example.
Why does the third column has the same size as the other?

Update:
I added another example where the table layout is fixed and the widths are ok.
Here is it.
Any idea why?

I need the header with the colspan but it makes the problem. I also need the table layout as fixed. Any idea how to workaround it?

The problem happens both in IE8 and Firefox.

Update:
I followed @Alex Hadley advice but this cause other problem.
I don’t know why the long cell is not hidden: http://jsfiddle.net/9vcC2/32/

Answer 1

As noted by @AlexHadley, the problem is caused by the multiple td rows in your thead, which would require the use of colgroups to support the layout.

However, as it would seem that the initial tr in thead is actually being used to provided a description of the table, it would probably be more semantic to use the caption tag to assign a definition to the table.

On a mark up note, you should also be using th instead of td for the rows in the table header.

For more information about what is available within the table markup check out this this WDG reference.