asked on

how to make column header fix in a jquery table using body column width?

how to make column header fix in a jquery table?

when I attempt to use the following CSS, the table stay fix but loses its width with tbody

table tr
{
position:fixed;
}

<title>Untitle</title>
<style type="text/css">
.chighlight
{
background-color:#408080;
color:white;
}
.scheckbox_column
{
      width:48px;
      height:20px;
}
.scolumn_a
{
      width:198px;
      height:20px;
      overflow:hidden;
}
.scolumn_b
{
      width:719px;
      height:20px;
      overflow:hidden;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.cookies.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.iutil.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.idrag.js"></script>
<script type="text/javascript" src="jquery.grid.columnSizing.js"></script>
<script type="text/javascript">
$(function()
{
$("table").columnSizing()
$('input[type=checkbox]').bind('click change',function(){
if( this.checked )
{
var row=$(this).closest('tr');
alert( row.attr('id'));

alert( $('td:eq(1)', row).html() )//second cell
alert( $('td:eq(2)', row).html() )//third cell
}
});
});
$(document).ready(function(){
$('.highlight').mouseover(function(){
l = $(this).parents("table").find("tr").index( $(this) );
$('.chighlight').removeClass('chighlight');
$(this).addClass('chighlight');
});
l = -1;
$(document).keyup(function(e) {
if(e.keyCode == 38) {
if(--l<0) {
l = 0;
}
$("tr","table").removeClass('chighlight');
$("tr:eq(" + l + ")","table").addClass('chighlight');
}
else if(e.keyCode == 40) {
if(++l>$("tr", "table").length-1) {
l = $("tr", "table").length-1;
}
$("tr","table").removeClass('chighlight');
$("tr:eq(" + l + ")","table").addClass('chighlight');
}
else if(e.keyCode == 32) {
                        $("input[type='checkbox'][name='vehicle']", "tr.chighlight").focus().click();
                  }
})
});
</script>
</head>
<body>
<div id="divTable" style="overflow-x:hidden; overflow-y:scroll;margin-left:auto;margin-right:auto;margin-top:200px;height:300px;width:710px">
<table id="theTable" border='1' style="width:700px;height:300px;">
<thead><tr><th class="checkbox_colum">Selection</th><th class="column">Column A</th><th class="column">Column B</th></tr></thead>
<tbody>
<tr id='rowa' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowb' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowc' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowd' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowe' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowf' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowg' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowh' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowi' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowj' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowk' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowl' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowm' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rown' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowo' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowp' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowq' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowr' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rows' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowt' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowu' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowv' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='roww' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>
<tr id='rowx' class="highlight"><td class="checkbox_column"><input type="checkbox" name="vehicle"/></td><td class="column_a">a</td><td class="column_b">b</td></tr>

</tbody>
</table>
</div>
</body>
</html>

ASKER CERTIFIED SOLUTION

Mrunal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

areyouready344

ASKER

I was hoping for the expert to give an example from his experience