IE6+7 Borderproblem in Colgroup

Michael Kugler · May 11, 2009

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] · May 11, 2009

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

IE6+7 Borderproblem in Colgroup

Michael Kugler

PA Bear [MS MVP]