How to filter a HTML table without javascript and just CSS
Bootstrap HTML Table

Using too much javascript will make your page slower. And there are still a few people out there who don’t use javascript at all. So in general it is a good practise to use as little javascript as possible. With this neat little snippet you can design a filter for a table only with CSS. No javascript needed.

In my example im using a bootstrap table, but it will work with any HTML table.

HTML-Code:

First we create the table we want to filter and add a checkbox for each class we want to toggle. The label of the checkbox can be designed to look just like a button, while the checkbox itself won’t be visible. The for-Attribute toggles the checkbox when the lable is clicked.
You can think of the checkboxes as boolean variables. Checked means rows of that type will be displayed. Unchecked means rows of that type won’t be displayed.

<!-- Filter -->
<input type="checkbox" class="tablefilter" name="class1" id="class1" checked />
<label for="class1">Class1</label>                
<input type="checkbox" class="tablefilter" name="class2" id="class2" checked />
<label for="class2">Class2</label>        
<input type="checkbox" class="tablefilter" name="class3" id="class3" checked />
<label for="class3">Class3</label>

<!-- Table -->
<table class="table table-bordered table-striped filteredtable">
    <thead>
        <tr class="class1">
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Filtered Column</td>
            <td>Column 3</td>
        </tr>
    </thead>
    <tbody>
        <tr class="class1">
            <td>Test</td>
            <td>Test</td>
            <td>Class1</td>
            <td>Test</td>
        </tr>
        <tr class="class1 class2">
            <td>Test</td>
            <td>Test</td>
            <td>Class1 & Class2</td>
            <td>Test</td>
        </tr>
        <tr class="class2">
            <td>Test</td>
            <td>Test</td>
            <td>Class2</td>
            <td>Test</td>
        </tr>
        <tr class="class1 class3">
            <td>Test</td>
            <td>Test</td>
            <td>Class1 & Class3</td>
            <td>Test</td>
        </tr>
    </tbody>
</table>

We filter for the content of the third column. As you can see the content that we are filtering for, is also used as classname.

CSS-Code:

Now we only need the logic for displaying and hiding the rows.

.filteredtable tbody tr,
.tablefilter{
    display:none;
}
#class1.tablefilter:checked ~ table tbody tr.class1,
#class2.tablefilter:checked ~ table tbody tr.class2,
#class3.tablefilter:checked ~ table tbody tr.class3 {
    display:table-row;
}

The first rule hides all rows and the checkboxes.
The second rule displayes the rows, which have a corresponding checked checkbox.
The ~ is looking for HTML-Tags after the selected one, on the same level.

It would be nice to see if a checkbox is currently selected. Let’s make our labels look a little more like buttons and make them a little darker if selected.

.tablefilter + label{
    cursor: pointer;
    background-color: #666;
    color: #fff;
    padding: 3px;
    
}
.tablefilter:checked + label{
    background-color: #111;
}

The + will refrence HTML-Objects on the same level, directly after the selected one.

With this Selector you can create your own styling.

Some final remarks

  • If you want only one class at a time selected, you can use radiobuttons instead of checkboxes
  • Currently all rows, of which at least one class is selected are displayed. If you want to display only the rows, of which all classes are selected, you can turn arround the logic. Make all rows visible and hide them when the checkbox is selected. Start with all checkboxes unchecked.
    In this version a checked checkbox will symbolise a hidden class.

All option for table filter without javascript

Html-Code

Add the checkbox and label.

<input type="checkbox" class="tablefilter" name="all" id="all" checked />
<label for="all">All</label>    

CSS-Code

CSS-Rule to display all rows.

#all.tablefilter:checked ~ table tbody tr{
    display:table-row;
}

Working example for download.

Feel free to ask your questions in the comments.

LEAVE A REPLY

Please enter your comment!
Please enter your name here