Automatic Column Hiding using CSS in Responsive Table

In this tutorial, we are going to see how to create a responsive table with automatic column hiding. I used only HTML and CSS to hide columns responsively without any third party component dependencies like jQuery, DataTables. In a previous tutorial, we have seen how to implement automatic column hiding using DataTables to display responsive table. Check that out if you are using DataTables.

I used CSS class selectors to define the column priority as priority-1, priority-2. 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 then the display styles will be applied to the table columns based on the window size boundary specified in the media query.

View Demo

mobile-view-table

Column Priority Class in Responsive Table HTML

This HTML code is used to display responsive tables using the class selectors. I specified the priority to the HTML table columns to control the display based on the priority. When the window size is smaller the column display will be hidden using the priority class selectors.

<table id="contact-detail" class="tutorial-table" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th class="priority-1" width="15%">First Name</th>
			<th class="priority-2" width="15%">Last Name</th>
			<th class="priority-3" width="15%">Address</th>
			<th class="priority-4" width="10%">Phone</th>
			<th class="priority-5" width="15%">DOB</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td class="priority-1">Barry</td>
			<td class="priority-2">Allen</td>
			<td class="priority-3">Florida</td>
			<td class="priority-4">2211335566</td>
			<td class="priority-5">02-02-1983</td>
		</tr>
		...
		...
		<tr>
			<td class="priority-1">Tony</td>
			<td class="priority-2">Stark</td>
			<td class="priority-3">Texas</td>
			<td class="priority-4">8899886655</td>
			<td class="priority-5">05-10-1984</td>
		</tr>
	</tbody>
</table>

CSS Media Queries for Automatic Column Hiding

The following CSS code is used to implement automatic column hiding using media queries. This code contains media query for four various window screen by specifying the min max boundaries. When the window size falls into the boundary, the corresponding display style will be applied to the table columns.

        @media screen and (max-width: 1225px) and (min-width: 1045px) {
		.priority-5{
			display:none;
		}
	}
	
	@media screen and (max-width: 1045px) and (min-width: 835px) {
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
	}
	
	@media screen and (max-width: 565px) and (min-width: 300px) {
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
		.priority-3{
			display:none;
		}
	}
	
	@media screen and (max-width: 300px) {
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
		.priority-3{
			display:none;
		}
		.priority-2{
			display:none;
		}
	
	}

Output

The following screenshots show the table columns in different screen size. In the small window, the last three low prioritized columns are hidden and it shows only two columns.

desktop-view

mobile-view

View DemoDownload

This CSS code tutorial was published on June 30, 2017.

↑ Back to Top