Tablas Responsive con CSS

Garrett Dimon:

Dijo “Las tablas de datos no se comportan bien en un diseño responsive.”

Garrett tiene razon. Las tablas de datos o tablas HTML son elementos bastantes amplios, necesariamente una sola fila de datos debe mantenerse junta para darle sentido a la tabla. Las tablas pueden flexionar sus dimenciones, pero hasta cierta medida hasta que se comienzan a descomponer volviendose incómodas en dispositivos moviles como celulares y tables que no cuentan con una amplia pantalla.

Este comportamiento se relaciona con el ajuste que trata de hacer el navegador para acomodar la tabla a los tamaños de las diferentes pantallas. Entonces, ¿Qué sucede cuando la pantalla es más estrecha que la anchura mínima de una tabla? ¿Como solucionarlo? Usted puede aljear y ver toda la tabla, pero el tamaño de texto será demasiado pequeño para leer o puede acercar hasta el punto de legibilidad, pero no podra realizar una lectura rapida del contenido.

responsive-table

La solución a nuestro problema

Vamos a utilizar los principios de “diseño sensible” (CSS @media queries) para detectar si la pantalla es más pequeña que el tamaño máximo de nuestra tabla. Si es así, vamos a cambiar el formato de la tabla.

<table>
  <thead>
  <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td>
  </tr>
  <tr>
      <td>The</td>
      <td>Tick</td>
      <td>Crimefighter Sorta</td>
  </tr>
  </tbody>
</table>

Nuestro CSS regular no es nada fuera de lo comun

/* 
Estilos genéricos para Desktops / Laptop 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

Es hora de trabajar sobre pantallas pequeñas. Ya hemos descubierto que el ancho mínimo de la tabla es de 760px por lo que configuraremos nuestro media query css para tener efecto cuando el ancho de nuestra pantalla sea menor que 760px.

El cambio más importante es obligar a la tabla a no comportarse como un tabla. Asignaremos a cada celda un elemento relacionado con nivel de bloque, manteniendo el estilo de rayas de cebra. Esto hara que cada fila de la tabla se transforme en una tabla propia pero solo tan ancha como la pantalla por lo que no habra más desplazamiento horizontal, para cada celda usaremos el css generico de contenido (:before) para agregar una etiqueta para saber lo que significa cada texto en la celda.

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	tr { border: 1px solid #ccc; }
 
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
 
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
 
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Porn Name"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Y así, las tablas pasan de una experiencia regular a pantallas moviles dando una experiencia mas agradabale al usuario.

mobiletable

Articulo original en Ingles

ver ejemplo Online

Suscribir
Notificar a
guest
3 Comentarios
Comentarios en línea
Ver todos los comentarios
Pilarbcn

Muy bueno y util, gracias!!

Camilo

Genial, muy útil de verdad.