显示隐藏具有选定类的行时保持表/列宽度稳定

Question

此代码就像一个超级按钮，可以根据选定的过滤器显示/隐藏表行。但是，表格的宽度会根据行中的内容而跳跃。我尝试在 CSS 和 jQuery 中将表格宽度和每列的宽度按类设置为 100%。宽度仍然根据每个 td 中内容的大小不断跳跃。该表实际上有六列，因此表宽度从 100% 宽度跳到 50% 确实很烦人。

我希望它保持相同的宽度，无论选择什么选择器，无论 tds 中内容的宽度是多少。但我该怎么做呢？您可以看到我尝试在 jQuery 中设置宽度的三种方法。我将不胜感激任何建议！

$(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
    });
});

这是 CSS：

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

这是 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

您所要做的就是向表格单元格添加类。

例如：

HTML

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

CSS

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

这里是代码示例