Hello all,
I am building a collapsable tree using Javascript with DOM in IE. In
order to make collapsed cells disappear I have been hiding the text.
The cells collapse but still leave borders behind. I have set the
borderStyle to none and the black lines go away, but there is still
white space where the borders were. Following are my html files I am
using to test it.
----------------BEGIN HTML FILE----------------
<SCRIPT LANGUAGE="Javascript">
function hide()
{
document.getElementById("td2").style.borderStyle = "none";
document.getElementById("td3").style.borderStyle = "none";
document.getElementById("td4").style.borderStyle = "none";
document.getElementById("td5").style.borderStyle = "none";
document.getElementById("td6").style.borderStyle = "none";
document.getElementById("td7").style.borderStyle = "none";
document.getElementById("td8").style.borderStyle = "none";
document.getElementById("td9").style.borderStyle = "none";
}
function show()
{
document.getElementById("td2").style.borderStyle=" solid";
document.getElementById("td3").style.borderStyle=" solid";
document.getElementById("td4").style.borderStyle=" solid";
document.getElementById("td5").style.borderStyle=" solid";
document.getElementById("td6").style.borderStyle=" solid";
document.getElementById("td7").style.borderStyle=" solid";
document.getElementById("td8").style.borderStyle=" solid";
document.getElementById("td9").style.borderStyle=" solid";
}
</SCRIPT>
<html>
<head>
<title>Test Border</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="include-files/style.css" type="text/css"
rel="STYLESHEET">
</head>
<body>
<table id="tbl">
<tr id="tr1">
<td id="td1"> first table row </td>
</tr>
<tr id="tr2">
<td id="td2" > </td> <!-- style="border-width:0px;" -->
</tr>
<tr id="tr3">
<td id="td3"> </td>
</tr>
<tr id="tr4">
<td id="td4"> </td>
</tr>
<tr id="tr5">
<td id="td5"> </td>
</tr>
<tr id="tr6">
<td id="td6"> </td>
</tr>
<tr id="tr7">
<td id="td7"> </td>
</tr>
<tr id="tr8">
<td id="td8"> </td>
</tr>
<tr id="tr9">
<td id="td9"> </td>
</tr>
<tr>
<td> Blah </td>
</tr>
</table>
<input type="button" onclick="hide()" name="Hide" value="Hide">
<input type="button" onclick="show()" name="Show" value="Show">
</body>
</html>
----------------END HTML FILE----------------
----------------BEGIN CSS FILE (/include-files/style.css)-------
//a-style.css paper studios main
BODY { background-color: white}
A:link {text-decoration: none; color: 0000DD}
A:visited {text-decoration: none; color: 0000DD}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: FF0000}
A.topmenu:link {text-decoration: none; color: CCFF99}
A.topmenu:visited {text-decoration: none; color:CCFF99 }
A.topmenu:active {text-decoration: none; }
A.topmenu:hover {text-decoration: none; color: CCCCFF }
P{ font: 10pt/12pt Verdana, serif }
td{ font: 10pt/12pt Verdana, serif }
caption { font: 10pt/12pt Verdana, serif }
center{font: 10pt/12pt Verdana, serif }
ul{ font: 10pt/12pt Verdana, serif }
XMP{ font: 10pt/12pt Verdana, serif }
table{border-collapse: collapse;}
td{border-width:1px; border-color:black; border-collapse:
seperate;border-style:solid;}
table.allstuff{border-collapse: collapse;}
td.white{border-width:1px; border-color:white; border-collapse:
collapse;border-style:solid;}
td.group{background:4972A3; color:white; border-width:1px;
border-color:black; border-collapse: collapse;border-style:solid;}
tr.heading{background:99cccc;}
td.blank{border-width:0px; }
td.bringDown{border-collapse: collapse; border-width: 1px;
border-color:gray;}
td.bringDown2{border-collapse: collapse; border-width: 0px;}
tr.bringDown{border-collapse: collapse; border-width: 0px;}
p.margin {margin: 4px 4px 4px 4px}
table.adds {border-color:gray; border-width:1px;
border-collapse:collapse;}
td.written {border-color:gray; border-width:1px;
border-collapse:collapse;}
tr.filled {border-color:gray; border-width:1px;
border-collapse:collapse;}
// main
----------------END CSS FILE----------------
Try these to demo what I am seeing.
I want the table rows to collapse as if they are a single solid table.
Thanks in advance,
--David
Similar Threads
