Tablas adaptativas (Responsive table)

facebook-svg gplus-svg twitter-svg

Una tabla adaptativa (responsive table) cambia su aspecto al cambiar el tamaño la ventana del navegador.
Podemos realizar una tabla adaptativa utilizando solo html y css.
Una idea desarrollada por Chris Coyier

CONSEJO: cambia el tamaño de la ventana del navegador para ver como cambia el aspecto de la tabla.

Titulo Año Formato Autor Tamaño Precio
Intocable 2012 DVD Françoise Cluzet 120 minutos 12,86€
El gen egoista 2010 Kindle Richard Dawkins 424 páginas 11,50€
Mis Tardes Con Margueritte 2011 DVD Gerard Depardieu 82 minutos 6,24€
Nicostratos 2011 Kindle Eric Boisset 208 páginas 4,94€
Juegos en que participamos 2007 Libro Eric Berne 232 páginas 1.076,28€

La tabla tiene asignada una clase ( class="resp" ). También tiene un <thead> y un <tbody>.


Titulo Año Formato Autor Tamaño Precio
Intocable 2012 DVD Françoise Cluzet 120 minutos 12,86€
El gen egoista 2010 Kindle Richard Dawkins 424 páginas 11,50€
Mis Tardes Con Margueritte 2011 DVD Gerard Depardieu 82 minutos 6,24€
Nicostratos 2011 Kindle Eric Boisset 208 páginas 4,94€
Juegos en que participamos 2007 Libro Eric Berne 232 páginas 1.076,28€

A continuación, se crean en el CSS las reglas que dan estilo a las tablas en general.


table {
  width: 100%;
  background: white;
  margin-bottom: 1.25em;
  border: solid 1px #dddddd;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr th,
table tr td {
  padding: 0.5625em 0.625em;
  font-size: 0.875em;
  color: #222222;
  border: 1px solid #dddddd;
}

table tr.even,
table tr.alt,
table tr:nth-of-type(even) {
  background: #f9f9f9;
}

Y ahora lo más importante: las reglas que darán estilo a las tablas en tamaños de pantalla situados debajo del punto de discontinuidad definido (breakpoint) - en este caso 768px.


@media only screen and (max-width: 768px) {
	table.resp,
	.resp thead,
	.resp tbody,
	.resp tr,
	.resp th,
	.resp td,
	.resp caption {
	  display: block;
	}
	
	table.resp {
	  border: none
	}
	
	.resp thead tr {
	  display: none;
	}
	
	.resp tbody tr {
	  margin: 1em 0;
	  border: 1px solid #2ba6cb;
	}
	
	.resp td {
	  border: none;
	  border-bottom: 1px solid #dddddd;
	  position: relative;
	  padding-left: 45%;
	  text-align: left;
	}
	
	.resp tr td:last-child {
	  border-bottom: 1px double #dddddd;
	}
	
	.resp tr:last-child td:last-child {
	  border: none;
	}
	
	.resp td:before {
	  position: absolute;
	  top: 6px;
	  left: 6px;
	  width: 45%;
	  padding-right: 10px;
	  white-space: nowrap;
	  text-align: left;
	  font-weight: bold;
	}

Más información sobre los @media query

Por fin reemplazaremos el contenido de los <th> con el mismo texto insertado antes de (:before) <td>.
Observe por favor el formato que tienen los diacríticos, utilizados con la propiedad contenido (content:).


	td:nth-of-type(1):before {
	  content: "Titulo";
	}
	
	td:nth-of-type(2):before {
	  content: "A\00f1o";
	}
	
	td:nth-of-type(3):before {
	  content: "Formato";
	}
	
	td:nth-of-type(4):before {
	  content: "Autor";
	}
	
	td:nth-of-type(5):before {
	  content: "Tama\00f1o";
	}
	
	td:nth-of-type(6):before {
	  content: "Precio";
	}
}