I have a table that has an inputbox in one of the elements wich i use to filter the table with.

When i wright something in the box the table gets filtered.

The wierd thing is that if i use display:block to show the rows that I want to see it totally destroys the look of the row. But if I use jquery .toggle(); it works fine.

Why is that?

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 SCRIPT that works

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

```

If I use display:block

![With display:block](https://i.stack.imgur.com/WZkfn.png)

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;
}

```