Hi all,
I have an HTML/Css code, for display of Collapsible Data.
While the Data grid/table looks neat and good in IE, it is not so in FireFox. Furter in FF, each row height keeps expanding, on usage of
the collapsible marker .... Can anyone help me in fixing this issue, so the FF display is as good as IE display ? The code is attached here for your look - Thanks again.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/CSS">
table {
position:relative;
left: 25%;
width:50%;
border-collapse:collapse;
border:2px solid silver;
}
tbody {
display:block
}
th {
font-weight:normal;
text-align:left;
font-size:9pt;
}
td {
text-align:center;
padding:8px;
border:1px solid silver; }
.linkspan {
color:gold;
background-color:blue;
font-weight:bold;
text-decoration:none;
padding:0 2px;
font-size:1.2em;
margin:right:3px;
}
.vis {
display:block;
}
</style>
<script type="text/javascript">
var ELpntr=false;
function hideall()
{
locl = document.getElementsByTagName('tbody');
for (i=0;i<locl.length;i++)
{
locl.style.display='none';
}
}
function showHide(EL,PM)
{
ELpntr=document.getElementById(EL);
if (ELpntr.style.display=='none')
{
document.getElementById(PM).innerHTML=' - ';
ELpntr.style.display='block';
}
else
{
document.getElementById(PM).innerHTML=' + ';
ELpntr.style.display='none';
}
}
onload=hideall;
</script>
</head>
<body>
<table>
<thead>
<tr class="vis"> <th colspan="3"><a href="#"
onclick="showHide('fruit','fruitspan')">
<span id="fruitspan" class="linkspan"> + </span> Fruit:</a></th></tr>
</thead>
<tbody id="fruit">
<tr> <td> Apple</td><td> Red</td><td> Shiny</td></tr>
<tr> <td> Pear</td><td> Green</td><td> Firm</td></tr>
<tr> <td> Banana</td><td> Red</td><td> Shiny</td></tr>
</tbody>
</table>
<table>
<thead>
<tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('vegtable','vegtablespan')">
<span id="vegtablespan" class="linkspan"> + </span> Vegtable:</a></th></tr>
</thead>
<tbody id="vegtable">
<tr> <td> Carrot</td><td> Orange</td><td> Crisp</td></tr>
<tr> <td> Cucumber</td><td> Green</td><td> Delicious</td></tr>
<tr> <td> Cauliflower</td><td> White</td><td> Firm</td></tr>
</tbody>
</table>
<table>
<thead>
<tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('animal','animalspan')">
<span id="animalspan" class="linkspan"> + </span> Animal:</a></th></tr>
</thead>
<tbody id="animal">
<tr> <td> Cat</td><td> Calico</td><td> Lazy</td></tr>
<tr> <td> Dog</td><td> Retriever</td><td> Golden</td></tr>
<tr> <td> Badger</td><td> Muddy</td><td> Mean</td></tr>
</tbody>
</table>
</body>
</html>
