Tablas receptivas: solo CSS, sin JavaScript

El diseño web receptivo se ha establecido como la forma de desarrollo web moderno desde hace un tiempo. El creciente uso de Internet móvil hace necesario que un sitio web sea reconocible incluso en pantallas pequeñas. Esto siempre es un desafío para los diseñadores y desarrolladores web. ¿Dónde pongo la navegación compleja? ¿Cómo proporciono fotos y gráficos? ¿Qué hago con las tablas anchas de varias columnas? A esta última pregunta, hay múltiples respuestas. No existe una única solución correcta para todas las tablas receptivas.

Hacer que las tablas sean desplazables

Una salida relativamente fácil sería hacer que las tablas se puedan desplazar verticalmente. Aquí, la mesa no se ve afectada en su ancho. Con un poco de CSS, se asegura que la tabla no interfiere con el ancho del diseño y, en cambio, el área visible se reduce al ancho de la pantalla o al ancho del diseño. Puede usar su dedo para deslizar la mesa hacia la izquierda o hacia la derecha.

table {
  display: block;
  overflow: scroll;
}

Para hacer que una tabla se pueda desplazar, todo lo que se necesita son dos atributos CSS. Por un lado, debe convertir la mesa en un elemento de bloque a través de «pantalla». Luego, a través de «desbordamiento», debe asegurarse de que no se muestre todo lo que exceda el ancho del diseño web. Sin embargo, esta área seguirá siendo accesible a través del desplazamiento vertical.

Tabla desplazable

Además, debe asignar un ancho establecido a las columnas de la tabla o evitar un ajuste automático a través de «espacios en blanco».

table th, table td {
  white-space: nowrap;
}

De lo contrario, la tabla siempre se reducirá para ajustarse al ancho del diseño, lo que provocará muchos cambios de palabra desagradables.

Visualización de las columnas de la tabla una debajo de la otra

La primera variante tiene la ventaja de que es fácil de ejecutar y de que siempre terminará con una columna completa en el área visible. Sin embargo, dependiendo de los datos mostrados, puede tener más sentido tener todo el contenido visible en una fila. Para esto, también hay una solución, que es un poco más difícil, pero aún funciona sin JavaScript.

La segunda variante dividirá completamente una tabla para mostrar cada línea con las respectivas etiquetas de columna como un bloque debajo de la otra. Para esto, es necesario agregar una línea a cada una de las celdas de una fila a través de atributos de datos.

<table>
  <tr>
    <th>Name</th>
    <th>Street</th>
    …
  </tr>
  <tr>
    <td data-th="Name">Manfred Mustermann</td>
    <td data-th="Straße">Examplestreet 1</td>
    …
  </tr>
  …

En el ejemplo, la etiqueta de la primera columna se asigna a la primera celda de una fila a través de «data-th», y la etiqueta de la segunda columna se asigna a la segunda celda. Esto tiene que repetirse para todas las celdas de la tabla.

Las filas de la tabla se muestran una debajo de la otra

Posteriormente, las filas y las celdas deben mostrarse como elementos de bloque, y el título ya no debe estar visible.

table td, table tr {
  display: block;
}

table th {
  display: none;
}

Luego, integre el pseudo elemento “::before” para colocar el valor del atributo “data-th” delante del contenido de cada celda.

table td::before {
  content: attr(data-th)":";
  display: inline-block;
  font-weight: bold;
  margin-right: 0.25em;
}

A través de «contenido», el valor del atributo de datos, así como dos puntos, se asignan al pseudoelemento. Luego, debe mostrar todo como un elemento de bloque en línea.

También debe colocar todas las definiciones de CSS dentro de una consulta de medios para que solo se proporcionen para ciertas resoluciones. La segunda solución funciona en todos los navegadores modernos. Solo Internet Explorer 9 y versiones anteriores tienen problemas con él.

Conclusión y ejemplos

Ambas soluciones pueden justificarse. El primero crea una buena visión general cuando se trata de mostrar columnas individuales. El segundo es óptimo cuando es importante tener una visión general del contenido de las líneas individuales.

• Tablas de respuesta desplazables (ejemplo en Codepen)
• Tablas receptivas como párrafo (ejemplo en Codepen)

(dpe)