Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 479
  • Last Modified:

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>
0
areyouready344
Asked:
areyouready344
1 Solution
 
areyouready344Author Commented:
I was hoping for the expert to give an example from his experience
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now