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

Problems seeing some web pages	1	Feb 22, 2006
HELP with colspan Bug	4	May 4, 2006
Acoustics - 80Hz loss in car!	0	Oct 7, 2023
Generate list based on multiple criteria	1	Dec 19, 2008
Border conflicts in IE	2	Mar 1, 2006
Exception when accessing mdf file when using IIS and aspnet_wp.exe	4	Jun 16, 2011
Javascript Code	1	Sep 15, 2004
Page shows blanc when using template cc and expressions (<%# %>)	3	Mar 25, 2010

IE6+7 Borderproblem in Colgroup

Michael Kugler

PA Bear [MS MVP]

Ask a Question

Similar Threads