Pure HTML5/CSS3 solución de mesa adaptable
| Autor: | AllThingsSmitty |
|---|---|
| Views Total: | 6,860 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 2, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución HTML5/CSS3 pura para que tu tabla HTML sea más legible en pantallas pequeñas, sin JavaScript.
Funcionamiento
Utilice el atributo Data-Label para especificar el elemento de de cabecera correspondiente para cada celda de tabla.
<thead> <tr> <th scope="col">Column 1</th> <th scope="col">Column 2</th> <th scope="col">Column 3</th> <th scope="col">Column 4</th> </tr> </thead> <tbody> <tr> <td scope="row" data-label="Column 1">1</td> <td data-label="Column 2">2</td> <td data-label="Column 3">3</td> <td data-label="Column 4">4</td> </tr> ... </tbody>
Estilo de la tabla HTML normal.
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th, table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
} Haga que la tabla HTML responda mediante consultas de medios CSS3.
@media screen and (max-width: 639px) {
table { border: 0; }
table thead { display: none; }
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child { border-bottom: 0; }
}
