Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

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

0
areyouready344
Asked:
areyouready344
  • 2
  • 2
  • 2
1 Solution
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
You can use overflow hidden for elements streching it's continers
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
pardon me ... you may get me wrong ... to be clear

for instance ;

.column_a
{
        width:198px;
        height:20px;
        overflow:hidden;
}
0
 
areyouready344Author Commented:
What does overflow:hidden suppose to accomplish? I have tried it but no change.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
vr6rCommented:
There really is no simple way to do what you want with a standard table.  They don't behave the same way that spreadsheets do where you can - in excel for example - freeze the top row.

The easiest way to get close to what you want is what I mentioned in your previous post - where you place the content in a table.  Place that table in a scrollable div, and place that div in your main table.  Like so:

<table>
  <tr>
    <td>header1</td>
    <td>header2</td>
    <td>header3</td>
  </tr>
  <tr>
    <td colspan='3'>
      <div style='height:400px;overflow:auto;'>
        <table>
          <tr>
            <td>
              content goes here
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

Granted, like you mentioned, using this method your header columns may not be the same size as your content columns so it's best to use fixed width if possible.

If used fixed table column widths is absolutely out of the question and you have to have this functionality you'll probably be looking at using either a plugin of some sort or a complicated mess of css & javascript.

For reference here is a jquery plugin option I came across that looks like it would do what you want.
0
 
vr6rCommented:
oops! forgot the plugin link... here it is!

http://www.trirand.net/demophp.aspx
0
 
areyouready344Author Commented:
One answer to this question is to change the property of the false to true

tableWidthFixed : true
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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