Jquery 使用选定类显示隐藏行时保持表/列宽度稳定

这段代码就像一个符咒，根据选定的过滤器显示/隐藏表行。但是，表的宽度会根据行中的内容进行跳跃。我尝试在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>    

按状态筛选：

名称
地位
积极的”；
积极的”；
积极的”；

您所要做的就是将类添加到表单元格中

例如：

HTML

---

代码示例

您所要做的就是将类添加到表单元格中

例如：

HTML

---

代码示例

我在html和css中为td添加了类。它在fiddle中工作得很好，但在我的网站中却没有。可能是因为6列？在fiddle中尝试了3列，但它仍然工作得很好。感谢您的测试。问题只存在于Firefox中。IE7和IE8中的列宽保持不变。我最好重新验证我的XHTML。啊！我开始精简了king关于时髦的跨浏览器问题，并重新验证了页面。现在它可以工作了。这很好！你必须验证你的HTML，并在所有浏览器中检查它。它们的工作方式都不同。我在HTML和css中为td添加了类。它在fiddle中工作得很好，但在我的网站中不工作。可能是因为6列？在fiddle中尝试了3列，但仍然是wworks非常完美。感谢您的测试。问题只存在于Firefox中。IE7和IE8中的列宽保持不变。我最好重新验证我的XHTML。啊！我开始考虑时髦的跨浏览器问题并重新验证页面。现在它可以工作了。很好！您必须验证HTML并在所有浏览器中始终检查它…它们都工作不同不客气。

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

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