separating table header from table body, maintain widths

Forum Moderators: phranque

Message Too Old, No Replies

separating table header from table body, maintain widths

IE javascript to manage scrollable body in table

broniusm

10:57 pm on Jul 7, 2003 (gmt 0)

I've got one table split into two: id=headertable and id=bodytable in hopes that I could create a fixed-header scrollable content table:


function initresultDiv() {
 var ht = document.getElementById("headertable");
 var bt = document.getElementById("bodytable");
 var htr = ht.rows[0];
 var btr = bt.rows[0];
 var btrlen = btr.cells.length;
 for (var i=0; i<btrlen; i++) {
 htr.cells[i].style.width = btr.cells[i].offsetWidth;
 }
}

The jscript above does go an reformat the header table, but only somewhat, and not nearly enough. The problem is body content varies in size, so I want the header table THs to match the body table TDs.

Anyone have any better luck with this sort of trickery? (Apparently NS supports a scrollable tbody, but I'm in an IE web app)

broniusm

2:24 pm on Jul 8, 2003 (gmt 0)

I sandboxed the above example in another realtime screen-stretching jamboree as seen below. This simulates just what I'm looking for, however, it all gets off-balance with Any amount of content difference. Ideas?


<script>
function pageInit() {
var tmr1 = setInterval("showsize()", 30);
var tmr2 = setInterval("resize()", 20);
}function showsize() {
var t = document.getElementById("tt");
var t2 = document.getElementById("tt2");
txti[0].value = t.offsetWidth;
txti[1].value = t.rows[0].cells[0].offsetWidth;
txti[2].value = t.rows[0].cells[1].offsetWidth;
txti[3].value = t.rows[0].cells[2].offsetWidth;
txti[4].value = t.rows[0].cells[3].offsetWidth;
}
function resize() {
var t = document.getElementById("tt");
var t2 = document.getElementById("tt2");
t2.rows[0].cells[0].width = t.rows[0].cells[0].offsetWidth;
t2.rows[0].cells[1].width = t.rows[0].cells[1].offsetWidth;
t2.rows[0].cells[2].width = t.rows[0].cells[2].offsetWidth;
t2.rows[0].cells[3].width = t.rows[0].cells[3].offsetWidth;
}
</script>
<style>
table { background-color:#a000a0; }
td { border:1px solid white; }
table#tt2 td { background-color:#00a000; }
</style><body onload="pageInit();">
<label for="txti">Table:</label><input id="txti"><br>
<label for="txti">TD1:</label><input id="txti">
<label for="txti">TD2:</label><input id="txti">
<label for="txti">TD3:</label><input id="txti">
<label for="txti">TD4:</label><input id="txti">
<table width="100%" id="tt">
<tr>
<td>&nbsp;</td>
<td>&nbsp;asd</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table id="tt2">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>

broniusm

2:42 pm on Jul 8, 2003 (gmt 0)

The solution appears to be to set TD widths and not have TD contents exceeding that length. Then, in the separate tables, just make sure each TH width corresponds with each TD width properly. Works like a charm-- I just hope I can adhere to such requirements.

(of course, then wrap the "body" table in a scrolling div)