Automatic Column Hiding using CSS in Responsive Table

In this tutorial, I am going to teach you that  how to create a responsive table with automatic columns hiding. Here I will use only HTML and CSS to hide columns responsively I will not use any third party component dependencies like JavaScript Query, DataTables. In a previous tutorial, we have told that WHY WE USE PERCENTAGE VALUE INSTEAD OF PIXEL VALUE to display responsive table. If you want to know that how to do that then Check that out.

NOW LET’S START!  Here I am going to create a table with 6 columns and I will use CSS class selectors to define the column priority as c1, c2, c3, c4, c5and c6. The display styles are added to these class selectors based on the media screen size using CSS media queries. When the window screen is getting smaller than the display styles will be applied to the table columns based on the window size boundary specified in the media query.

See the Picture [1] below as demo;

Step 1:

Create HTML Responsive Table

First of all, create a HTML responsive Table by using following Code and also use the class selectors and define in above (Note you can set class selector name as your own choice also if you want). I following HTML Table code I have specified the priority to the HTML Table columns to control the display based on the priority. This HTML code is used to display responsive tables using the class selectors. When the window size is smaller the column display will be hidden using the priority class selectors.

<table id="table1" class="responsive-table" cellspacing="0" width="100%">

            <thead style="background:gray; text-color:white; text-style:bold">

                        <tr>

                                    <th class="c1" width="15%">First Name</th>

                                    <th class="c2" width="15%">Last Name</th>

                                    <th class="c3" width="15%">Address</th>

                                    <th class="c4" width="10%">Phone</th>

                                    <th class="c5" width="10%">DOB</th>

      <th class="c6" width="15%">Remarks</th>

                        </tr>

            </thead>

                       <tbody>

                        <tr>

                                    <td class="c1">Waqas</td>

                                    <td class="c2">Ahmed</td>

                                    <td class="c3">Florida</td>

                                    <td class="c4">2211335566</td>

                                    <td class="c5">02-02-1983</td>

      <td class="c6">Software and Web Developer</td>

                        </tr>

    .......

    .......

            <tr>

                                    <td class="c1">Shafqat</td>

                                    <td class="c2">Ali</td>

                                    <td class="c3">Attock</td>

                                    <td class="c4">221xxxxxxx</td>

                                    <td class="c5">02-02-1983</td>

      <td class="c6">---</td>

                        </tr>

            <tr>

                                    <td class="c1">Amir</td>

                                    <td class="c2">Abbasi</td>

                                    <td class="c3">Muree</td>

                                    <td class="c4">22xxxxx</td>

                                    <td class="c5">02-02-1983</td>

      <td class="c6">Web Developer</td>

                        </tr>

                       

            </tbody>

</table>

Step 2:

CSS Media Query with Automatic Column Hiding

Now add following CSS media Query code is used to implement automatic column hiding. This code contains media query for two various window screens by specifying the min and max boundaries. When the window size falls into the boundary, the corresponding display style will be applied to the table columns.

Note: You can use as many as media screens according to your need.

@media screen and (max-width: 1225px) and (min-width: 1045px) {
.c6{
display:none;
}
.c5{
display:none;
}
}
@media screen and (max-width: 1045px) and (min-width: 835px) {
.c6{
display:none;
}
.c5{
display:none;
}
.c4{
display:none;
}
}

                    

RESULTING OUTPUT

The following screenshots show the table columns in different screen size. In the small window, the last three or four low prioritized columns are hidden and it shows only first three or four columns according to screen size mentioned in CSS MEDIA QUERY.

All Columns Show

Last Three Columns Hidden

Last Two Columns Hidden

You can also try it yourself in given snip below: