?
Solved

How to make the columns adjustable within a scrollable div. excluding the checkbox column?

Posted on 2011-05-02
6
Medium Priority
?
457 Views
Last Modified: 2012-05-11
How to make the columns adjustable within a scrollable div. excluding the checkbox column? For example, if I have a table width of 500px, the checkbox column would be 10px, and the remaining width size would be shared between column A, B, C, and etc within the scrollable div area.

      <title>Untitled</title>
<style type="text/css">
.chighlight
{
   background-color:#408080;
   color:white;
}
.tbodyScroll
{
overflow:scroll;
}
.divTable
{
overflow:"auto";
}
.theTable
{
height:"450px";
weight:"360px";
}
</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>
<div style="overflow:auto; height:556px;width:518px;">
<table id="theTable" border='1' style="height:500px;width:500px;">
<thead><th></th><th>Column A</th><th>Column B</th></thead>
<tbody class="tbodyScroll">
      <tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
</tbody>
</table>
</div>
</body>
</html>
0
Comment
Question by:areyouready344
  • 3
  • 2
6 Comments
 
LVL 8

Expert Comment

by:vr6r
ID: 35506186
Something like this?

Add to CSS:
.chkcolumn{
  width: 10px;
}

<tbody class="tbodyScroll">
      <tr id='rowa' class="highlight"><td class='chkcolumn'><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class='chkcolumn'><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
etc...
0
 

Author Comment

by:areyouready344
ID: 35507642
its not working after trying your suggestion


<title>Untitled</title>
<style type="text/css">
.chighlight
{
   background-color:#408080;
   color:white;
}
.tbodyScroll
{
overflow:scroll;
}
.divTable
{
overflow:"auto";
}
.theTable
{
height:"450px";
weight:"360px";
}
.chkcolumn
{
  width: 10px;
}

</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>
<div style="overflow:auto; height:556px;width:518px;">
<table id="theTable" border='1' style="height:500px;width:500px;">
<thead><th></th><th>Column A</th><th>Column B</th></thead>
<tbody class="tbodyScroll">
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowa' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
      <tr id='rowb' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowc' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowd' class="highlight"><td class="chkcolumn"><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
      <tr id='rowe' class="highlight"><td class="chkcolumn" ><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
     
</tbody>
</table>
</div>
</body>
</html>
0
 

Author Comment

by:areyouready344
ID: 35509177
I asked the wrong question
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Expert Comment

by:deegoy418
ID: 35511192
Hi

I have modify the code as per your requirements, and now you will see in attached html page, that the checkbox column have 10px width and rest space (width) is divided equally in column A and B.

please let me know if it doesn't work for you.

thanks
 index.html
0
 

Author Comment

by:areyouready344
ID: 35693648
thanks deegoy418, anyway to make column a and b spaces adjustable between them with a fix table width according to the title of this request?
0
 
LVL 3

Accepted Solution

by:
deegoy418 earned 2000 total points
ID: 35704716
in the case of fix width table, you will need to give equal width to column A and B.

however in case of liquid table, only give the width value in percentage.
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question