Tabla adaptable con CSS puro

Vista prévia

Descripción

Una solución CSS pura minimalista para crear una tabla adaptable para móviles que utiliza consultas de medios CSS para hacer que las celdas de la tabla tengan un ancho completo en dispositivos pequeños.

Funcionamiento

Utilice el atributo de etiqueta de datos para especificar los encabezados de grupo para las celdas de tabla.

<table>

<thead>


<tr>



<th>Payment</th>



<th>Issue Date</th>



<th>Amount</th>



<th>Period</th>


</tr>

</thead>

<tbody>


<tr>



<td data-label="Payment">Payment #1</td>



<td data-label="Issue Date">02/01/2015</td>



<td data-label="Amount">$2,311</td>



<td data-label="Period">01/01/2015 - 01/31/2015</td>


</tr>


<tr>



<td data-label="Payment">Payment #2</td>



<td data-label="Issue Date">03/01/2015</td>



<td data-label="Amount">$3,211</td>



<td data-label="Period">02/01/2015 - 02/28/2015</td>


</tr>

</tbody>
</table>

El CSS básico para el estilo de la tabla en el escritorio.

table {

border: 1px solid #ccc;

width: 100%;

margin: 0;

padding: 0;

border-collapse: collapse;

border-spacing: 0;
}

table tr {

border: 1px solid #ddd;

padding: 5px;
}

table th,
table td {

padding: 10px;

text-align: center;
}

table th {

text-transform: uppercase;

font-size: 14px;

letter-spacing: 1px;
}

Las consultas medie de CSS para que la tabla sea más legible en dispositivos de pantalla pequeños.

@media screen and (max-width: 600px) {

table { border: 0; }

table thead { display: none; }

table tr {

margin-bottom: 10px;

display: block;

border-bottom: 2px solid #ddd;
}

table td {

display: block;

text-align: right;

font-size: 13px;

border-bottom: 1px dotted #ccc;
}

table td:last-child { border-bottom: 0; }

table td:before {

content: attr(data-label);

float: left;

text-transform: uppercase;

font-weight: bold;
}

}