Discussion:
IE6+7 Borderproblem in Colgroup
(too old to reply)
Michael Kugler
2009-05-11 12:00:01 UTC
Permalink
Hi NG,

I have problems with two tables with colgroups
The col values are set to the same values but the width of the columns is
different.
In IE8 and Firefox the result is ok. Here is a sample:(especially colunm 3
and 4)

Regards,

Michael

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>
<html>
<head>
</head>
<body>
Max Border<br>
4,1,3,4,4,4,4,4,4,1,4,4,4<br>
4,4,4,4,4,4,4,4,4,2,4,4,4<br>
<table border='0px' style='border-collapse:collapse;'>
<tbody>
<tr>
<td style='border:1px solid #00ff00;'>
<table>
<colgroup>
<col width='187'>
<col width='86'>
<col width='59'>
<col width='15'>
<col width='46'>
<col width='128'>
<col width='145'>
<col width='24'>
<col width='53'>
<col width='29'>
<col width='168'>
<col width='104'>
<col width='176'>
</colgroup>
<tbody>
<tr>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
</tr>
<tr>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
</tr>
<tr>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style='border:1px solid #ff0000;'>
<table>
<colgroup>
<col width='187'>
<col width='86'>
<col width='59'>
<col width='15'>
<col width='46'>
<col width='128'>
<col width='145'>
<col width='24'>
<col width='53'>
<col width='29'>
<col width='168'>
<col width='104'>
<col width='176'>
</colgroup>
<tbody>
<tr>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:1px solid #000000;'>1 </td>
</tr>
<tr>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:0px solid #000000;'>0 </td>
</tr>
<tr>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
</tr>
<tr>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
</tr>
<tr>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:4px solid #000000;'>4 </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
PA Bear [MS MVP]
2009-05-11 16:28:02 UTC
Permalink
IE Developer Center
http://msdn.microsoft.com/en-us/ie/default.aspx

Learn IE8
http://msdn.microsoft.com/en-us/ie/aa740473.aspx

HTML and DHTML Overviews and Tutorials
http://msdn.microsoft.com/en-us/library/ms537623.aspx and

Cascading Style Sheets (CSS)
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

Or you could post here instead:

MSDN IE Development Forums
http://forums.microsoft.com/MSDN/default.aspx?ForumGroupID=253&SiteID=1
--
~Robear Dyer (PA Bear)
MS MVP-IE, Mail, Security, Windows Client - since 2002
Post by Michael Kugler
Hi NG,
I have problems with two tables with colgroups
The col values are set to the same values but the width of the columns is
different.
In IE8 and Firefox the result is ok. Here is a sample:(especially colunm 3
and 4)
Regards,
Michael
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>
<html>
<head>
</head>
<body>
Max Border<br>
4,1,3,4,4,4,4,4,4,1,4,4,4<br>
4,4,4,4,4,4,4,4,4,2,4,4,4<br>
<table border='0px' style='border-collapse:collapse;'>
<tbody>
<tr>
<td style='border:1px solid #00ff00;'>
<table>
<colgroup>
<col width='187'>
<col width='86'>
<col width='59'>
<col width='15'>
<col width='46'>
<col width='128'>
<col width='145'>
<col width='24'>
<col width='53'>
<col width='29'>
<col width='168'>
<col width='104'>
<col width='176'>
</colgroup>
<tbody>
<tr>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
</tr>
<tr>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:3px solid #000000;height=16px;'>3 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
</tr>
<tr>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:2px solid #000000;height=16px;'>2 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:0px solid #000000;height=16px;'>0 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
<td style='border-left:1px solid #000000;height=16px;'>1 </td>
<td style='border-left:4px solid #000000;height=16px;'>4 </td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style='border:1px solid #ff0000;'>
<table>
<colgroup>
<col width='187'>
<col width='86'>
<col width='59'>
<col width='15'>
<col width='46'>
<col width='128'>
<col width='145'>
<col width='24'>
<col width='53'>
<col width='29'>
<col width='168'>
<col width='104'>
<col width='176'>
</colgroup>
<tbody>
<tr>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:1px solid #000000;'>1 </td>
</tr>
<tr>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:0px solid #000000;'>0 </td>
</tr>
<tr>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:0px solid #000000;'>0 </td>
</tr>
<tr>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:4px solid #000000;'>4 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
</tr>
<tr>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:3px solid #000000;'>3 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:1px solid #000000;'>1 </td>
<td style='border-left:2px solid #000000;'>2 </td>
<td style='border-left:0px solid #000000;'>0 </td>
<td style='border-left:4px solid #000000;'>4 </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Loading...