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?
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.
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/
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
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.