Pure HTML5/CSS solución de tabla adaptable

Vista prévia

Descripción

Una solución de tabla adaptable simple que hace que su tabla HTML mejor legibilidad en dispositivos móviles utilizando CSS : antes de selector y HTML5 datos atributo.

Funcionamiento

Utilice el atributo Data-Heading para definir el nombre de cabecera para cada celda de tabla en pantallas pequeñas.

<table class="table">

<tr>


<th class="table__heading">Name</th>


<th class="table__heading">Type</th>


<th class="table__heading">Grade</th>

</tr>

<tr class="table__row">


<td class="table__content" data-heading="Name">Gizmo</td>


<td class="table__content" data-heading="Type">Robot</td>


<td class="table__content" data-heading="Grade">A+</td>

</tr>
</table>

Las reglas CSS básicas para la tabla adaptable. Agregue los siguientes fragmentos de código CSS a las consultas de medios con un punto de interrupción especificado que prefiera.

@media (max-width: 32rem) {
.table__heading {

display: none;
}
.table__content {

display: block;

padding: .5rem 0;
}
.table__row {

margin: .25rem 1rem;

padding: .5rem 0;

display: block;

border-bottom: 2px solid #FFC842;
}
.table__content:before {

content: attr(data-heading);

display: inline-block;

width: 5rem;

margin-right: .5rem;

color: #999;

font-size: .75rem;

text-transform: uppercase;

letter-spacing: 2px;
}
}