fixed table layout resize when column is hiding

Question

I have a fixed table layout with width being 425px. It is a table with 200 rows. When the user un-select the checkbox specifying the column, the column is hidden. When the column is hidden, the table is left with the space on the hidden column and the other column width is resized. Could some one point me on the fix?


  <script type="text/javascript">
   var showMode = 'table-cell';  
   if (document.all) showMode='block';  

     function toggleVis(btn) {  
         btn   = document.forms['tcol'].elements[btn];  
         cells = document.getElementsByName('t'+btn.name);  
         mode = btn.checked ? showMode : 'none';  
         for(j = 0; j < cells.length; j++)  
              cells[j].style.display = mode;  
     }

Also, the html and css


   .sortable {width: 425px;border: 2px solid #900;border-collapse:collapse;table-layout: fixed}

 .sortable th {text-align:left;border: 1px solid #fff}

 .sortable thead th.sub0 {text-align: center;color:#fff;font-size:115%;background: #88b8db repeat-x 0 -1400px;padding: 2px}

 .sortable tbody th.sub0 {text-align: center;font-size:90%;color:#000;background: #efefef repeat-x 0 -100px;padding: 5px}

 .sortable tbody th.sub1 {word-wrap:break-word;text-align: left;font-size: 90%;color: #000;background: #efefef repeat-x 0 -100px;padding: 6px}

   <table class="sortable" id="table_id">

   <col width="45">

   <col width="180">

   <col width="200">

   <thead>

   <tr>

   <th class="sub0"  id="tcol1">ID

   <th class="sub0"  id="tcol2">File Name

   <th class="sub0"  id="tcol3">Path

  </tr>

  </thead>

  <tbody>

  </table>

  <br/>

  <form name="tcol" onsubmit="return false">

           Show Columns

  <input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> Id

<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> File Name

 <input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> Path

 </form>

Thanks, Karthik

What is the desired result you would like? Re-size all columns according to new available total width? — Tom
Thanks, Since the table has border, i need to get rid of the space. Instead, i can have the last column adjust the remaining size of the layout. I am not sure to implement the same. — Kaygee
Anyway, I have to get rid of the space on the right side of the table. Thanks — Kaygee

atlavis atlavis · Accepted Answer · 2010-11-23T19:32:49

cells = document.getElementsByName('t'+btn.name)

look:

<th class="sub0"  id="tcol1">ID

<th class="sub0"  id="tcol2">File Name

<th class="sub0"  id="tcol3">Path

You got id there not name

It won't do what you want anyway.

EDIT

This works for me:

<style>
  table { width: 425; background-color: #eee;}
  td, th { background-color: #ddd} 
</style> 

<script type="text/javascript">

function toggleVis(btn)
{
  var col = btn.name.substring(3);
  var tr = document.getElementsByTagName ( "tr" );
  if ( btn.checked )
  {
    for ( var i=0; i < tr.length; i ++)
    {
      tr[i].childNodes[col-1].style.display = "table-cell";
    }
  }
  else
  {   
    for ( var i=0; i < tr.length; i ++)
    {
      tr[i].childNodes[col-1].style.display = "none";     
    }
  }
}   
</script>

<table> 
  <thead>
    <tr><th class="sub0"  id="tcol1">ID</th><th class="sub0"  id="tcol2">File Name</th><th class="sub0"  id="tcol3">Path</th></tr>
  </thead>
  <tbody>
    <tr><td>0</td><td>file_0</td><td>dir_0/file_0</td></tr>
    <tr><td>0</td><td>file_1</td><td>dir_1/file_1</td></tr>
    <tr><td>0</td><td>file_2</td><td>dir_2/file_2</td></tr>
    <tr><td>0</td><td>file_3</td><td>dir_3/file_3</td></tr>
  </tbody>
</table>

<br/>

<form name="tcol" onsubmit="return false">
  Show Columns
  <input type=checkbox name="col1" onclick="toggleVis(this)" checked="checked"/>Id
  <input type=checkbox name="col2" onclick="toggleVis(this)" checked="checked"/>File Name
  <input type=checkbox name="col3" onclick="toggleVis(this)" checked="checked"/>Path
</form>

I do not break lines inside <tr></tr> due to white-spaces, because they count as child nodes.

fixed table layout resize when column is hiding

1 Answers