Make column width same for 2 tables

0
votes

I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly. I have written some code like shown below to dynamically alter the column width

$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());

But it doesnt seem to work properly. Any help appreciated.

2
javascriptjqueryasp.nethtml-table
this can not work because this parametres are the minimum width, there is a case the the width can be larger in some lines and this affect all the rest. - Aristos
yes..but do u have any idea on how to fix this issue? - user1211259
you can only place divs, inside the td, say to the div to cut what is expand it, or something like that. Is hard to make 2 tables have the same width if your width is less than your data width in some cases. If you have an online page I maybe see more of your issue. - Aristos

2 Answers

0
votes

Use this method $(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});

0
votes

Created a working fiddle for this: http://jsfiddle.net/terjeto/dx7H5/

Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.

Could it be that your exmple is not accurate because of lacking reset-css code? I use this: http://developer.yahoo.com/yui/reset/