Tabla adaptable de CSS puro amigable para móviles
| Autor: | kkayyoo |
|---|---|
| Views Total: | 4,118 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 8, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Sin embargo, otra solución de tabla adaptable CSS pura que transforma una tabla HTML normal en varias tablas separadas en la vista móvil.
Funcionamiento
Utilice el atributo Data-Label para especificar el encabezado de cada celda de la tabla.
<td data-label="First Name">Bob</td> <td data-label="Last Name">Smith</td> <td data-label="School">Northeastern University</td> <td data-label="Major">Computer Science</td>
Los estilos CSS principales para la vista de tabla adaptable.
/*Mobile View*/
@media only screen and
(max-width: 760px) {
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 #E74C3C; }
tr + tr { margin-top: 1.5em; }
td {
/* make like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
background-color: #F8D9D5;
text-align: left;
}
td:before {
content: attr(data-label);
display: inline-block;
line-height: 1.5;
margin-left: -100%;
width: 100%;
white-space: nowrap;
}
}
