Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Diseño de tabla responsiva con cuadrícula CSS

Hacer que las tablas respondan al tamaño de la pantalla siempre ha sido un problema sin una solución perfecta para todas las situaciones. 

Una opción es ocultar algunos datos menos importantes a medida que el tamaño de la pantalla se reduce, y luego permitir que el usuario expanda los datos de alguna manera si quiere ver todo. 

O puede configurar la tabla para que se desplace horizontalmente si el tamaño de la pantalla es demasiado pequeño. 

Estas opciones pueden ser necesarias para grandes tablas complejas de muchos datos, pero si se trata de una tabla simple, encuentro que usar la cuadrícula CSS ofrece una solución elegante.



En este ejemplo, tengo dos secciones que son cuadrículas y utilizo el mismo diseño que está configurado con la term-gridclase. La sección de encabezado es una cuadrícula, y cada línea en la sección de datos es una cuadrícula. Tenga en cuenta que estoy usando Vue.js para mostrar los datos y mantener limpio el html, pero no está relacionado con la cuadrícula. Si no estuviera usando Vue, cada línea de datos se repetiría con su propia cuadrícula. A continuación se muestra un ejemplo de cómo se vería el HTML para una definición sin Vue.

<div class="term-grid">
  <label>Lorem</label>
  <div class="definition">ipsum dolor sit amet consectetur adipisicing</div>
  <div class="alternate">something</div>
</div>

El CSS importante es agregar display: gridal contenedor que desea que sea una cuadrícula. En mi ejemplo, esto se hace con la clase term-gridTambién desea configurar el tamaño de cada columna en la cuadrícula usando grid-template-columnsEstoy usando unidades fraccionarias para configurar los diferentes anchos de columna. El uso de unidades fraccionarias significa que las columnas crecerán y se reducirán proporcionalmente a medida que cambie el tamaño de la pantalla. El grid-gapes simplemente el espacio entre las columnas.

.term-grid {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  grid-gap: 2em;
}

Cuando el usuario está en una pantalla pequeña, puede cambiar fácilmente el diseño para que sea una columna de datos en lugar de una fila. Hay diferentes formas de lograr esto, pero la forma en que lo manejo es cambiar la grid-template-columnspropiedad para que sea 1frCada una de las piezas de datos en la cuadrícula ocupará todo el ancho de la pantalla, o para ser más precisos, el ancho completo de su contenedor principal.

@media (max-width: 600px) {
  .term-grid {
    grid-template-columns: 1fr;
    grid-gap: 0.5em;
  }

  .grid-header {
    display: none;
  }

  .alternate {
    margin-top: -10px;
    font-style: italic;
    order: 1;
  }
  
  .definition {
    order: 2;
  }
}

También estoy ocultando los encabezados y cambiando ligeramente el orden y los estilos de las celdas de datos segunda y tercera. Esto no va a ser algo que siempre quieras hacer, pero debido a que la tercera columna es opcional, quería que se mostrara bajo el término y en cursiva para que no parezca parte de la definición.



Estoy incrustando el Pen por segunda vez con código para forzar que la pantalla sea más pequeña, para que pueda ver la versión móvil. Si no se muestra para usted, puede abrir el lápiz en su propia pestaña y jugar con el tamaño de la pantalla por su cuenta. 

El código que define la cuadrícula y los pequeños cambios para dispositivos móviles son realmente solo unas pocas líneas, y realmente me gusta esta solución para tablas de datos simples. 

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas