展示:block扼杀我的风格

Question

我有一个表，它在我用来筛选表的一个元素中有一个inputbox。

当我在盒子里写东西的时候，表格就会被过滤掉。

奇怪的是，如果我使用display:block来显示我想要查看的行，它会完全破坏行的外观。但是如果我使用jquery .toggle()，它就能正常工作。

为什么会这样呢？

HTML：

<body>
    <table>
        <tr><th>Users<input type="text" id="filter"/></th></tr>
        <tr class="user" data="patrick"><td>Patrick</td></tr>
        <tr class="user" data="john"><td>John</td></tr>
    </table>
</body>

有效的过滤器脚本

$('#filter').keyup(function(){
    $(".user").css("display", "none");
    if($("#filter").val()!=''){             
        var filterstr = $("#filter").val().toLowerCase();
        $("[data*="+filterstr+"].user").toggle();
    }else{
        $(".user").toggle();
    }
});

如果我使用display:block

​

​

CSS：

table
{
   width: 200px;
}
td
{
   border: 1px solid #000;
   font: bold 10px Helvetica, Arial, sans-serif;
   padding: 5px;
}
th
{
   background: #f3f3f3;
   border: 1px solid #000;
   font: bold 10px Helvetica, Arial, sans-serif;
   padding: 5px;
}

Answer 1

请使用display:table-row，因为表行在默认情况下不是display:block！

Answer 2

这是因为表的默认显示类型不是display: block，而是display: table。每个表体、行、单元格等也有自己的显示类型。我认为JQuery的toggle()方法根据您要切换的元素设置正确的显示类型。

Answer 3

如果不看到CSS就很难判断，但这可能是因为"display:block;“在输入中添加了一个边框，而切换则没有。