Hacer que una tabla responda usando CSS

Una forma práctica de hacer que las tablas se vean bien en el móvil

Hace unos días recibí una advertencia delConsola de búsqueda de Google. Detectó un problema de usabilidad móvil en una página donde tengo una mesa grande.

Esta es la tabla que me dio el problema:

En dispositivos móviles, se procesó bastante mal:

No es una buena experiencia de usuario y es un error en la Consola de búsqueda de Google. Si hay algo que no quiero es un error / advertencia en ese lugar. No cuando es algo que puedo arreglar.

Hugo, el generador de sitios estáticos que utilizo, me permite inyectar CSS específico a una sola página, simplemente agregando un<style>etiqueta en el archivo de rebajas. Práctico.

Así que comencé a buscar una buena manera de hacer que mi mesa respondiera. Encontré este muy buen artículo sobre Trucos CSS:Tablas de datos receptivos. ¡Es de 2011 y todavía funciona bien!

El truco es este: queremos que la tabla se muestre como un elemento de bloque en lugar de como una tabla en el sentido tradicional de CSS. Ocultamos todos los encabezados de la tabla moviéndolos fuera de la vista, e insertamos un nuevo bloque en la tabla, y cada fila tendrá su propio conjunto de encabezados, así:

Aquí está el código que logra el diseño anterior:

@media
only screen and (max-width: 1500px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
  }
  td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before { content: "Option"; }
  td:nth-of-type(2):before { content: "Description"; }
  td:nth-of-type(3):before { content: "Type"; }
  td:nth-of-type(4):before { content: "Default";}
}

Las cosas importantes que querrá personalizar para que su propia tabla responda son las últimas 4 líneas; debe ingresar el título de cada “columna” y debe agregar más si tiene más columnas. O elimínelos si tiene menos.

La otra cosa es el espacio que ocuparán los nuevos “encabezados” para cada fila. Agregué un150pxmargen, y debe hacer referencia a él 2 veces: una como unmargin-left: 150pxen eltdy comomargin-left: -150pxen eltd: before.

Finalmente, debe decidir cuándo se activa este nuevo diseño. Lo activé cuando la página tiene menos de 1500 px, porque esa tabla es enorme. También podría hacer que este sea el comportamiento predeterminado en lugar de mostrar la tabla normal en pantallas gigantes, pero hasta ahora creo que el problema está resuelto.

Espero que esto ayude.

Descarga mi gratisManual de CSS


Más tutoriales de CSS:


Tech Wiki en línea!