<!--
Internet Explorer 6.0
Demonstration of border ghost problem when hiding & revealing table rows.
As cells become wider and narrower, ghost borders remain on the screen.
If you have suggestions, please write to paul@dandemutande.org
-->
<html>
<head><title>IE row collapse border bug</title>
<script language="Javascript">
var sDatagridColWidths = new Array();
//==============================
function jsDatagridSelect(argSelector){
//-----------------------------
DatagridTable.display = "none";
//DatagridTable.visibility = "hidden";
//DatagridTable.position = "absolute";
var aRows = DatagridTable.getElementsByTagName("TR");
for (var iRow=0; iRow < aRows.length; iRow++)
{
var oRow = aRows[iRow];
var sSelector = oRow.getAttribute("selector");
if (sSelector)
{
if ((argSelector == "*") || (sSelector == "") || (sSelector.indexOf(argSelector) >= 0))
{
oRow.style.display = "block";
//oRow.style.visibility = "visible";
//oRow.style.position = "static";
}else{
oRow.style.display = "none";
//oRow.style.visibility = "hidden";
//oRow.style.position = "absolute";
}
}
/*
// ensure cell width
var aCells = oRow.all;
for (var iCol=0; iCol < sDatagridColWidths.length; iCol++){
aCells[iCol].style.width = sDatagridColWidths[iCol];
//aCells[iCol].style.pixelWidth = sDatagridColWidths[iCol];
//aCells[iCol].width = sDatagridColWidths[iCol];
}
*/
}
jsDatagridAdjustFloatHeads();
DatagridTable.display = "block";
//DatagridTable.visibility = "visible";
//DatagridTable.position = "static";
}
//==============================
function jsDatagridAdjustFloatHeads(){
//------------------------------
// Adjust the widths of the floating heads to be the same as the table's own heads (necessary after selecting records).
// get the row of floating heads
var oFloatingHeads = document.getElementById("DatagridFloatingHeads");
//alert("oFloatingHeads.className = " + oFloatingHeads.className);
var aFloatingHeads = oFloatingHeads.childNodes;
//alert("aFloatingHeads.length = " + aFloatingHeads.length);
// get the row of column heads
var aDatagridHeads = DatagridHeads.all;
// starting position
var iCurrentLeft = findPosX(DatagridHeads);
for (var iCol=0; iCol < aDatagridHeads.length; iCol++){
var oFloatingHead = aFloatingHeads[iCol];
oFloatingHead.style.pixelWidth = aDatagridHeads[iCol].offsetWidth;
// for some reason the first column needs to be tweaked
if (iCol==0) oFloatingHead.style.pixelWidth++;
oFloatingHead.style.pixelLeft = iCurrentLeft;
// get ready for the next column
iCurrentLeft += aDatagridHeads[iCol].offsetWidth;
}
}
//==============================
function jsDatagridInit()
//------------------------------
{
jsDatagridTweakRows();
jsDatagridFloatHeads();
}
//==============================
function jsDatagridTweakRows(){
//------------------------------
// This function assigns column-defined attributes to data cells.
var aColDefs = DatagridColumns.all;
var aHeads = DatagridHeads.all;
//var aTBody = DatagridTable.getElementsByTagName("TBODY");
var aRows = DatagridTable.getElementsByTagName("TR");
for (var iRow=0; iRow < aRows.length; iRow++){
var oRow = aRows[iRow];
if (!oRow.id || oRow.id != "DatagridHeads"){
var aCells = oRow.all;
for (var iCell=0; iCell < aCells.length; iCell++){
var oCell = aCells[iCell];
var oColDef = aColDefs[iCell];
if (oColDef.className){
oCell.className = oColDef.className;
}
}
}
}
}
//==============================
function jsDatagridFloatHeads(){
//------------------------------
// Copy the table's own column heads into a row of floating layers which stay fixed as the table scrolls.
// create the floating column heads container
var oFloatingHeads = document.createElement("DIV");
document.body.insertBefore(oFloatingHeads);
oFloatingHeads.id = "DatagridFloatingHeads";
oFloatingHeads.className = "cssDatagridFloatingHeads";
oFloatingHeads.style.pixelWidth = DatagridWindow.style.pixelWidth;
// position the floating heads container at the top of the table
var iHeadsTop = findPosY(DatagridHeadspace);
// get the row of column heads
var aDatagridHeads = DatagridHeads.all;
// start position-left
var iCurrentLeft = findPosX(DatagridHeads);
for (var iCol=0; iCol < aDatagridHeads.length; iCol++){
sDatagridColWidths[iCol] = aDatagridHeads[iCol].offsetWidth;
// create the floating head
var oFloatingHead = document.createElement("DIV");
oFloatingHeads.insertBefore(oFloatingHead);
// mimic the table column head
oFloatingHead.innerText = aDatagridHeads[iCol].innerText;
oFloatingHead.style.pixelWidth = aDatagridHeads[iCol].offsetWidth;
// for some reason the first column needs to be tweaked
if (iCol==0) oFloatingHead.style.pixelWidth++;
// assign class, position, & dimensions
oFloatingHead.className = "cssDatagridFloatingHead";
oFloatingHead.style.pixelTop = iHeadsTop;
oFloatingHead.style.pixelLeft = iCurrentLeft;
// get ready for the next column
iCurrentLeft += aDatagridHeads[iCol].offsetWidth;
}
// the right-most column gets a right-hand border
oFloatingHead.style.borderRight = "1px solid black";
}
//==============================
function findPosX(obj)
//------------------------------
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
//==============================
function findPosY(obj)
//------------------------------
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>
<style>
body{
margin-left: 10px;
}
*{
font: 8pt Verdana;
}
#demo{
width: 75%;
}
#demo div, #demo li{
margin-bottom: .8em;
font-size: 9pt;
}
#demo ul{
margin-bottom: 0;
}
#demo div b{
font-weight: bold;
font-size: 9pt;
}
#DatagridWindow{
overflow: auto;
height: 200px;
padding-right: 0px;
background-color: lightgrey;
border-bottom: 1px solid black;
}
#DatagridTable{
border-collapse: collapse;
}
#DatagridWindow td{
background-color: white;
border: 1px solid black;
}
#DatagridHeads{
border-right: 1px solid black;
border-left: 1px solid black;
}
.cssDatagridFloatingHeads{
position: absolute;
left: 0;
top: 0;
}
#DatagridHeads th, .cssDatagridFloatingHead, #DatagridHeadspace{
padding: 2px;
font-weight: bold;
white-space: nowrap;
text-align: center;
border-style: solid;
border-width: 1px 0px 1px 1px;
background-color: lightgrey;
}
#DatagridHeads th{
border-color: lightgrey;
color: lightgrey;
}
.cssDatagridFloatingHead{
position: absolute;
border-color: black;
}
.cssDatagridColCenter{
text-align: center;
}
.cssDatagridColLeft{
text-align: left;
}
</style>
</head>
<body onLoad="jsDatagridInit();">
<div id="demo">
<div>Internet Explorer 6.0</div>
<div>Demonstration of border ghost problem when hiding & revealing table rows.</div>
<div>As cells become wider and narrower, ghost borders remain on the screen.</div>
</div>
<div id="DatagridWindow">
<div id="DatagridHeadspace">DatagridHeadspace </div>
<table id="DatagridTable" width='100%' cellpadding=3 cellspacing=0 border=0>
<colgroup id="DatagridColumns">
<col class="cssDatagridColCenter">
<col class="cssDatagridColCenter">
<col class="cssDatagridColLeft">
<col class="cssDatagridColCenter">
<col class="cssDatagridColCenter">
<col class="cssDatagridColCenter">
<col class="cssDatagridColCenter">
<col class="cssDatagridColCenter">
<col class="cssDatagridColCenter">
<col class="cssDatagridColLeft">
</colgroup>
<tr selector="a|b|c"><td>20017527</td><td>abc</td><td>Apples Bananas Cucumbers Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="a"><td>20017527</td><td>a</td><td>Apples Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="b"><td>20017527</td><td>b</td><td>Bananas Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Bananas</td></tr>
<tr selector="c"><td>20017527</td><td>c</td><td>Cucumbers Cardomon Crabapple Cinnamon Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Cucumbers</td></tr>
<tr selector="d"><td>20017527</td><td>d</td><td>Dandelion Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Dandelion</td></tr>
<tr selector="a|b"><td>20015114</td><td>ab</td><td>Apples Bananas Inc.</td><td>6/26/2001</td><td> </td><td>8/22/2001</td><td>ln</td><td>prt</td><td>A</td><td>Bananas</td></tr>
<tr selector="a|b|c"><td>20017527</td><td>abc</td><td>Apples Bananas Cucumbers Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="a"><td>20017527</td><td>a</td><td>Apples Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="b"><td>20017527</td><td>b</td><td>Bananas Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Bananas</td></tr>
<tr selector="c"><td>20017527</td><td>c</td><td>Cucumbers Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Cucumbers</td></tr>
<tr selector="a|b"><td>20015114</td><td>ab</td><td>Apples Bananas Inc.</td><td>6/26/2001</td><td> </td><td>8/22/2001</td><td>ln</td><td>prt</td><td>A</td><td>Bananas</td></tr>
<tr selector="a|b|c"><td>20017527</td><td>abc</td><td>Apples Bananas Cucumbers Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="a"><td>20017527</td><td>a</td><td>Apples Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="b"><td>20017527</td><td>b</td><td>Bananas Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Bananas</td></tr>
<tr selector="c"><td>20017527</td><td>c</td><td>Cucumbers Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Cucumbers</td></tr>
<tr selector="a|b"><td>20015114</td><td>ab</td><td>Apples Bananas Inc.</td><td>6/26/2001</td><td> </td><td>8/22/2001</td><td>ln</td><td>prt</td><td>A</td><td>Bananas</td></tr>
<tr selector="a|b|c"><td>20017527</td><td>abc</td><td>Apples Bananas Cucumbers Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="a"><td>20017527</td><td>a</td><td>Apples Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Apples</td></tr>
<tr selector="b"><td>20017527</td><td>b</td><td>Bananas Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Bananas</td></tr>
<tr selector="c"><td>20017527</td><td>c</td><td>Cucumbers Inc.</td><td>6/26/2001</td><td>10/12/2001</td><td>10/10/2001</td><td>kea</td><td>rbm</td><td>A</td><td>Cucumbers</td></tr>
<tr selector="a|b"><td>20015114</td><td>ab</td><td>Apples Bananas Inc.</td><td>6/26/2001</td><td> </td><td>8/22/2001</td><td>ln</td><td>prt</td><td>A</td><td>Bananas</td></tr>
<tr id="DatagridHeads">
<th>Invoice</th>
<th>Customer No.</th>
<th>Customer</th>
<th>Received</th>
<th>Acknowledged</th>
<th>Shipped</th>
<th>Creater</th>
<th>Last User</th>
<th>Order</th>
<th>Description</th>
</tr>
</table>
</div>
<p>
<button onClick="jsDatagridSelect('a');">Select for 'a'</button>
<button onClick="jsDatagridSelect('b');">Select for 'b'</button>
<button onClick="jsDatagridSelect('c');">Select for 'c'</button>
<button onClick="jsDatagridSelect('d');">Select for 'd'</button>
<button onClick="jsDatagridSelect('*');">Select for '*'</button>
<div id="demo" style="margin-top: 25px;">
<div>This demo begins with a data table that sits inside a div with scrolling overflow.</div>
<div>The table's column heads are the last row in the table, greyed out so they don't 'show' but still present so they contribute their widths to the table rendering.</div>
<div>To keep the column heads fixed when data rows scroll, I copy the style & content of the table's real column heads to a row of floating divs that are fixed above the scrolling table.</div>
<div>Each time a data subset is selected, and some rows appear and others disappear, column widths may change. Therefore after each record selection I readjust the floating heads to be the same widths as the real table widths.</div>
<div><b>The problem</b> illustrated by this demo is that, as table rows appear & disappear, they leave phantom borders superimposed on the table grid in previous column positions.</div>
<div>Work-arounds that have failed to get rid of this problem:
<ul>
<li style="margin-top: -1em;">trying different settings of the display, visibility, and position attributes of rows & cells being hidden;
<li>changing the border attributes of cells being hidden;
<li>disappearing the entire table when selecting records in the vain hope of forcing the browser to redraw it completely.
</ul>
<div><a href="mailto: paul@dandemutande.org">Suggestions?</a></div>
</div>
</body>
</html>