Painting issue with tables in IE :(

[Praveen]

Hi,

Here is an annoying painting issue with hiding rows (same with columns) when
colgroups are defined in IE.

When hiding rows, certain portions of the border draw OVER other cells.

Here is some sample html. Use the HideRows and ShowRows button to see the
above bug.

Hiding rows causes the border to be drawn over the spanned cell
This happens only when there is a colgroup defined for the table.

0, 0 0, 1 0, 2 0, 3 0, 4 0, 5 0, 6 0, 7 0, 8 0, 9 0, 10
1, 0 1, 1 1, 2 1, 3 1, 4 1, 5 1, 6 1, 7 1, 8 1, 9 1, 10
2, 0 2, 1 A Very long String 2, 6 2, 7 2, 8 2, 9 2, 10
3, 0 3, 1 3, 2 3, 3 3, 4 3, 5 3, 6 3, 7 3, 8 3, 9 3, 10
4, 0 4, 1 4, 2 4, 3 4, 4 4, 5 4, 6 4, 7 4, 8 4, 9 4, 10
5, 0 5, 1 5, 2 5, 3 5, 4 5, 5 5, 6 5, 7 5, 8 5, 9 5, 10
Hide RowsShow Rows


If the text sizes are different across cells, the problem is even more
magnified. I need to use colgroups in my application for a different reason.

Hope someone has a workaround/solution to this problem.

Thanks
Praveen

 

[Praveen]

Here is the html again. Please replace "$" with "<"

Thanks
Praveen

$HTML>
$HEAD>
$title>TableScrollerTest$/title>
$meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
$meta name="CODE_LANGUAGE" Content="C#">
$meta name="vs_defaultClientScript" content="JavaScript">
$meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
$script language="javascript">
$!--
function RemoveBorders()
{
//var grid = document.getElementById("table1");
//if(grid.border == 1)
// grid.border = 0;
//else
// grid.border = 1;

}
-->
$/script>
$/HEAD>
$body>
$form id="Form1" method="post" runat="server">
$script lang="javascript">
$!--
document.write("$table id=\"mytable\" border=1
style=\"background-color:Wheat;BORDER-COLLAPSE:collapse;\">");

var curRowHeight = 10;
for(var i = 0; i $ 5; i++)
{
curRowHeight += 5;

document.write("$tr height=" + curRowHeight.toString() + ">");


for(var j = 0; j $ 5; j++)
{
if(i == 2 && j == 2)
{
document.write("$td colspan=2>Three, Three$/td>");
}
else if(i != 2 || j != 3)
document.write("$td>" + i.toString() + "," + j.toString() + "$/td>");
}
document.write("$/tr>");
}
document.write("$/table>");

function HideRows()
{
var table = document.getElementById("mytable");
for(var i = 1; i $ table.rows.length; i++)
{
var row = table.rows;
if(row.runtimeStyle.display != "none")
{
row.runtimeStyle.display = "none";
break;
}
}
}
function ShowRows()
{
var table = document.getElementById("mytable");
for(var i = 1; i $ table.rows.length; i++)
{
var row = table.rows;
if(row.runtimeStyle.display == "none")
{
row.runtimeStyle.display = "";
break;
}
}
}
-->
$/script>
$button onclick="HideRows()">Hide Rows$/button>
$button onclick="ShowRows()">Show Rows$/button>
$/form>
$/body>
$/HTML>

 

[Praveen]

Sorry, posted the wrong html in my previous post. Here it is again (replace
$ with <):

$!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
$html>

$body>
$label>Hiding rows causes the border to be drawn over the spanned cell
$/label>
$p>$label>This happens only when there is a colgroup defined for the
table.$/label>$/p>
$table id="table1" border="1" bordercolor="Blue"
style="background-color:Wheat;border-collapse:collapse;">
$colgroup>$col>$col>$col>$col>$col>$col>$col>$col>$col>$col>$col>$/colgroup>
$tr>
$th>0, 0$/th>$th >0, 1$/th>$th >0, 2$/th>$th >0, 3$/th>$th >0, 4$/th>$th

0, 5$/th>$th >0, 6$/th>$th >0, 7$/th>$th >0, 8$/th>$th >0, 9$/th>$th >0,

10$/th>
$/tr>$tr>
$td >1, 0$/td>$td >1, 1$/td>$td >1, 2$/td>$td >1, 3$/td>$td >1,
4$/td>$td >1, 5$/td>$td >1, 6$/td>$td >1, 7$/td>$td >1, 8$/td>$td >1,
9$/td>$td >1, 10$/td>
$/tr>$tr>
$td >2, 0$/td>$td >2, 1$/td>$td colspan="4">A Very long String$/td>$td

2, 6$/td>$td >2, 7$/td>$td >2, 8$/td>$td >2, 9$/td>$td >2, 10$/td>

$/tr>$tr>
$td >3, 0$/td>$td >3, 1$/td>$td >3, 2$/td>$td >3, 3$/td>$td >3,
4$/td>$td >3, 5$/td>$td >3, 6$/td>$td >3, 7$/td>$td >3, 8$/td>$td >3,
9$/td>$td >3, 10$/td>
$/tr>$tr>
$td >4, 0$/td>$td >4, 1$/td>$td >4, 2$/td>$td >4, 3$/td>$td >4,
4$/td>$td >4, 5$/td>$td >4, 6$/td>$td >4, 7$/td>$td >4, 8$/td>$td >4,
9$/td>$td >4, 10$/td>
$/tr>$tr>
$td >5, 0$/td>$td >5, 1$/td>$td >5, 2$/td>$td >5, 3$/td>$td >5,
4$/td>$td >5, 5$/td>$td >5, 6$/td>$td >5, 7$/td>$td >5, 8$/td>$td >5,
9$/td>$td >5, 10$/td>
$/tr>
$/table>

$script lang="javascript">
$!--
function HideRows()
{
var table = document.getElementById("table1");
for(var i = 1; i $ table.rows.length; i++)
{
var row = table.rows;
if(row.runtimeStyle.display != "none")
{
row.runtimeStyle.display = "none";
break;
}
}
}
function ShowRows()
{
var table = document.getElementById("table1");
for(var i = table.rows.length-1; i > 0; i--)
{
var row = table.rows;
if(row.runtimeStyle.display == "none")
{
row.runtimeStyle.display = "";
break;
}
}
}
-->
$/script>
$button onclick="HideRows()">Hide Rows$/button>
$button onclick="ShowRows()">Show Rows$/button>
$/body>
$/html>

Thanks
-Praveen