Forum Moderators: open
<table cellspacing="0" cellpadding="0">
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<tr>
<td style="background:#ff0000;">1</td>
<td style="background:#00ff00;">2</td>
<td style="background:#0000ff;">3</td>
<td style="background:#ffff00;">4</td>
<td style="background:#ff00ff;">5</td>
<td style="background:#00ffff;">6</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<tr>
<td colspan="2" style="background:#ff0000;">1</td>
<td colspan="2" style="background:#0000ff;">3</td>
<td style="background:#ff00ff;">5</td>
<td style="background:#00ffff;">6</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<col width="50px"/>
<tr>
<td colspan="3" style="background:#ff0000;">1</td>
<td colspan="2" style="background:#00ff00;">2</td>
<td style="background:#0000ff;">3</td>
</tr>
</table>
This flaw is completely messing up my ability to style a report as I want to.
If you have a suggestion how to get colspan to respect the colgroup col widths defined that would be excellent!
I tested you code in Firefox, Opera, Safari and IE.
Each browser rendered the code differently to the others.
I would suggest that you scrap your method and try it like this instead..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
.mytable {
border-collapse:collapse;
}
.mytable td {
padding:0;
}
.fifty {
width:50px;
}
.hundred {
width:100px;
}
.onefifty {
width:150px;
}
.red {
background-color:#f00;
}
.green {
background-color:#0f0;
}
.blue {
background-color:#00f;
}
.yellow {
background-color:#ff0;
}
.fuchsia {
background-color:#f0f;
}
.aqua {
background-color:#0ff;
}
</style></head>
<body><table class="mytable"><tr>
<td class="fifty red">1</td>
<td class="fifty green">2</td>
<td class="fifty blue">3</td>
<td class="fifty yellow">4</td>
<td class="fifty fuchsia">5</td>
<td class="fifty aqua">6</td>
</tr></table><table class="mytable"><tr>
<td class="hundred red">1</td>
<td class="hundred blue">3</td>
<td class="fifty fuchsia">5</td>
<td class="fifty aqua">6</td>
</tr></table><table class="mytable"><tr>
<td class="onefifty red">1</td>
<td class="hundred green">2</td>
<td class="fifty blue">3</td>
</tr></table></body>
</html>
I ended up replacing all the TDs with colspan attributes, with multiple TDs so that the width of the columns was respected.
In my actual version, each colgroup didn't have the widths on the col tags, the tags were all blank, and one css entry takes care of setting the col widths.
/*I can't wait for the CSS3, :nth-child(n) selector, to be fully adopted */
/* 1 */.Report table colgroup > col:first-child
{ width:66px; }
/* 2 */.Report table colgroup > col:first-child + col
{ width:50px; }
/* 3 */.Report table colgroup > col:first-child + col + col
{ width:180px; }
/* 4 */ .Report table colgroup > col:first-child + col + col + col
{ width:50px; }
/* 5 */.Report table colgroup > col:first-child + col + col + col + col
{ width:80px; }
/* 6 */.Report table colgroup > col:first-child + col + col + col + col + col
{ width:50px; }
And then with some jQuery I was able to style the table as I wanted too. Though the colspan tags would have made it simpler to calculate what to restyle, and what not too.
Unfortunately, while browsers automatically add the tbody tag, they don't automatically add the colgroup/col tags. Which is a shame really, since I now have lots of html that looks like:
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
