Tablas adaptativas (Responsive table)
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";
}
}