Duffman12
03-03-2008, 05:23 PM
what i'm trying to do is to make the header table follow the main table when it is scrolled. to do this, i made two divs, one for the header and one for the table. i restricted the widths of the div so there is overflow. in each of the divs, i put a table that is wider than the div. when the main div is scrolled, it calls the javascript function:
function scrollHeaders(block) {
document.getElementById('tableHeadTable').style.marginLeft = '-' + block.scrollLeft + 'px';
}
this just finds the scroll position of the main div and moves the top table accordingly.
this works in ie but not firefox. if you use firebug, you can see the javascript changing the margin-left, but it's not moving the content. although, when you scroll all the way to the end, then the header decides to jump over.
also, if you make the width of #tableHead and #tableHead table both 600px, it works. not sure what the deal is. any ideas?
you can download the html file here: 6091
here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tableHeader</title>
<script type="text/javascript" charset="utf-8">
function scrollHeaders(block) {
document.getElementById('tableHeadTable').style.marginLeft = '-' + block.scrollLeft + 'px';
}
</script>
<style type="text/css" media="screen">
#tableHead {
width: 400px;
border: 1px solid cornflowerblue;
overflow: hidden;
}
#tableHead table {
width: 600px;
}
#tableHead td {
border: 1px solid gray;
}
#tableHolder {
width: 400px;
border: 1px solid cornflowerblue;
overflow: auto !important;
}
#tableHolder table {
width: 600px;
}
#tableHolder td {
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="tableHead">
<table id="tableHeadTable" border="0" cellspacing="5" cellpadding="5" >
<tr><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td></tr>
</table>
</div>
<div id="tableHolder" onscroll="javascript:scrollHeaders(this)">
<table border="0" cellspacing="5" cellpadding="5">
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</div>
</body>
</html>
function scrollHeaders(block) {
document.getElementById('tableHeadTable').style.marginLeft = '-' + block.scrollLeft + 'px';
}
this just finds the scroll position of the main div and moves the top table accordingly.
this works in ie but not firefox. if you use firebug, you can see the javascript changing the margin-left, but it's not moving the content. although, when you scroll all the way to the end, then the header decides to jump over.
also, if you make the width of #tableHead and #tableHead table both 600px, it works. not sure what the deal is. any ideas?
you can download the html file here: 6091
here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tableHeader</title>
<script type="text/javascript" charset="utf-8">
function scrollHeaders(block) {
document.getElementById('tableHeadTable').style.marginLeft = '-' + block.scrollLeft + 'px';
}
</script>
<style type="text/css" media="screen">
#tableHead {
width: 400px;
border: 1px solid cornflowerblue;
overflow: hidden;
}
#tableHead table {
width: 600px;
}
#tableHead td {
border: 1px solid gray;
}
#tableHolder {
width: 400px;
border: 1px solid cornflowerblue;
overflow: auto !important;
}
#tableHolder table {
width: 600px;
}
#tableHolder td {
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="tableHead">
<table id="tableHeadTable" border="0" cellspacing="5" cellpadding="5" >
<tr><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td></tr>
</table>
</div>
<div id="tableHolder" onscroll="javascript:scrollHeaders(this)">
<table border="0" cellspacing="5" cellpadding="5">
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</div>
</body>
</html>