Question

This code works like a charm to show/hide table rows based on selected filters. However, the width of the table jumps based on the content in the rows. I tried setting the table width and width of each column by class to 100% in CSS and in the jQuery. The width still keeps jumping based on the size of the content in each td. The table actually has six columns so the table width jumping from 100% width to 50% is really annoying.

I want it to stay the same width no matter what selector is chosen and no matter what the width of the content in the tds. But how do I do that? You can see three ways I tried to set widths in jQuery. I would appreciate any suggestions!

$(document).ready(function() {
    // show all the organization
    $("#org_status tr").show();

    $("#filter_status a").click(function(evt) {
        evt.preventDefault();
        $("#org_status tr").hide();
        var id = $(this).attr('id');

        //set width of table and columns
        $("#org_status").width("100%");
        $(".org-name-col").css("width","85%");
        $(".org-status-col").attr("width","15%");

        $("." + id).show();
        //Setting widths here did not work either
    });
});

Here is the CSS:

#org_status{width:100%;}
.org-name-col{width:85%;}
.org-status-col{width:15%;}

Here is the HTML:

<p id='filter_status'>Filter by status: 
    <a href='#' id='All'>All</a> 
    <a href='#' id='Active'>Active</a> 
    <a href='#' id='Inactive'>Inactive</a> 
    <a href='#' id='Pending'>Pending</a>
</p>

<table id='org_status' class='info_table tablesorter'>
  <thead>
    <tr>
      <th class='org-name-col'>Name</th>
      <th class='org-status-col'>Status</th>
    </tr>
  </thead>
  <tbody>
<tr class='All Active'>
  <td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
  <td>Active</td>";
</tr>
<tr class='All Inactive'>
  <td><a href='admin/org_edit.php?org=22'>Bar</a></td>
  <td>Active</td>";
</tr>
<tr class='All Pending'>
  <td><a href='admin/org_edit.php?org=11'>
      Bar Foo Very Long Org Name Goes Here...........................</a></td>
  <td>Active</td>";
</tr>
  </tbody>  
</table>    

Answer 1

All you have to do is add classes to table cells.

For example:

HTML

<tr>
    <td class="name">Some text</td>
    <td class="state">Some state</td>
</tr>

CSS

.name{width:100%;}
.state{width:24px;}

Here is code example