Cómo esconder columnas automáticamente mediante CSS en una tabla responsive

En este tutorial vamos a ver cómo crear una tabla responsive con una característica especial: la de poder ocultar columnas automáticamente. Para ello simplemente utilizaré HTML y CSS, es decir, no utilizaré ninguna dependencia de terceros como jQuery, Datables, ni nada por el estilo.

A continuación verás cómo utilizo clases CSS para definir la prioridad de la columna tal que así: priority-1 y priority-2... Estas columnas se visualizarán basándose en el tamaño de la pantalla y, ¿como realizaremos eso? Muy sencillo, con media-queries. Cuando el tamaño de la pantalla se haga más pequeño, aplicaremos los estilos de visualización en las columnas de las tablas basándonos en lo especificado en las medias queries.

Una vez explicado esto, vamos con el código.

Clase Priority

El siguiente código HTML lo utilizaremos para mostrar tablas responsive y en ellas aplicaremos las clases mencionadas antes. En esa clase definiremos la prioridad para gestionar si queremos mostrarlas en dispositivos más pequeños o no. Es decir, cuando la pantalla se haga más y más pequeña, las columnas se ocultarán gracias al código de las clases prioritys.

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

Media queries de CSS para ocultar columnas automáticamente

Utilizaremos el siguiente código CSS para implementar la ocultación de columnas automáticamente con ayuda de las media queries. Como podrás ver, las media queries hacen referencia a cuatro tamaños de pantalla distintos. Cuando el tamaño de la pantalla concuerde con alguno de las media queries, se aplicarán sus estilos a las columnas de la tabla.

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