Question

I have a table which displays some names and each row contains 3 cells.

I would like to filter names and I am using jQuery to do it.

It works:

1. cells that do not match are HIDDEN by the script

2. cells that do match are DISPLAYED by the script

3. cells that do match are realigned horizontally, so that they are always displayed from left to right continuously.. which is good

The last thing that I am trying to achieve is to redistribute the matching cells one after the other, no matter which row they were located before filtering them!

So if a row contains only 1 match and the row below contains 0 matches and the row after contains 2 matches, then I want the 3 matches to be shown in the same row!

For example if you go here:

http://jsfiddle.net/yCR73/1/

and you type “a” in the search field, you will get 2 results.
But you won’t get them in the same row,
what I would like to get after the filtering is cell “fffaaa” near “aaafff”, not below it!

Answer 1

I don’t know that there’s a particularly reasonable way to do this with tables/table cells. I was able to splice together a quick jsfiddle by replacing the table with a set-width div and the table-cells with floated divs. This way hiding the other ‘cells’ automatically re-aligns the ‘rows’.