The javascript code is like this....
THe HTML code is like this...
Make the HTML file such a way so that vertical scroll appears. Otherwise floating header is meaningless ;)
Though CSS not be required for this, still i am posting the CSS code...
What i am trying to do is, i am setting a fixed positioned DIV and inside that a table is placed whose headers are supposed to have same width as original table has. But it fails..please help :)
Code:
function init(){
var mt = document.getElementById('main-tab');
var p = getElPosition(mt);
var h = document.getElementById('header');
var c_w = [];
var c_s = h.cells;
var c_s_l = c_s.length;
for(var i = 0; i < c_s_l; i++) c_w.push(c_s[i].offsetWidth);
var h_html = h.innerHTML;
var h_w = h.offsetWidth;
var div = document.createElement('DIV');
div.innerHTML = '<table border=0 cellpadding="0" cellspacing="1" width="100%" style="background-color:#cccccc;"><tr>' + h_html + '</tr></table>';
div.style.width = h_w + 'px';
div.style.position = 'fixed';
div.style.left = p.left + 'px';
div.style.top = p.top + 'px';
//div.style.border = '2px solid gray';
document.body.appendChild(div);
c_s = div.firstChild.rows[0].cells;
for(var i = 0; i < c_s_l; i++) c_s[i].style.width = c_w[i] + 'px';
}
Code:
<body onload="init();"> <table border=0 cellpadding="0" cellspacing="1" id="main-tab" style="background-color:#cccccc;"> <tr id="header"> <th>header1</th> <th>header2</th> .... .... .... </tr> <tr> <td>data1.........</td> <td>data2.....................................................</td> <td>data3.........</td> ..... ..... ..... </tr> <tr>
Though CSS not be required for this, still i am posting the CSS code...
Code:
th{
padding: 1px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12;
font-weight:600;
font-style:normal;
background-color: #bbccff;
text-align: left;
vertical-align: middle;
}
td{
padding: 1px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:10;
font-weight:600;
font-style:normal;
background-color: white;
text-align: left;
vertical-align: middle;
}
Comment