asked on

How to make column headers fix while all columns remain adjustable within a fix width?

How to make column headers fix while all columns remain adjustable within a fix width?

For example for a total width of 986px

checkbox_column (fix header) column_a (fix header) column_b (fix header)
------------------------------------------------------------------------------------------------------------------------------------
fix-width of 48px default-width of 198px default-width of 719px
(adjustable column width) (adjustable column width)

<title>Untitled</title>
<style type="text/css">
.chighlight 
{
   background-color:#408080;
   color:white;
}
.checkbox_column
{
	width:48px;
	height:20px;
}
.column_a
{
	width:198px;
	height:20px;
}
.column_b
{
	width:719px;
	height:20px;
}


</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="http://www.ita.es/jquery/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>
<table id="theTable" border='1' style="width:986px;">
      <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> 
</table>
</body>
</html>

Open in new window