Diseño dinámico de tablas según el tamaño de la pantalla…

Estoy tratando de tener una tabla que se muestre en dos formatos diferentes dependiendo del tamaño de la pantalla y me preguntaba cuál es la mejor opción para el trabajo:
– Tabla
– Flex
– Grid
– Combinación de Flex y Grid
– Ninguna de las anteriores y simplemente usar muchas Divs con clases e IDs.

El contenido de la tabla se actualizará dinámicamente a través de JS en el backend de Node.js y se enviará de vuelta al cliente, por lo que primero necesito obtener la estructura y el CSS correctos.

Lo que intento lograr es esto en tablets y pantallas más anchas:

y esto en pantallas móviles:

La tabla es bastante sencilla en modo de pantalla ancha, pero no estoy seguro de cómo hacer que Col2 y Col4 se envuelvan uno encima del otro. Sospecho que mover Col3 delante de Col2 se puede hacer con ‘order: 2’ para Col3 y ‘order: 3’ para Col2 utilizando Flex.

¿Se puede cambiar el diseño utilizando una consulta de medios y, de ser así, cómo se haría eso?

Estoy dispuesto a usar algo de JavaScript si ayuda, pero no estoy seguro de si JS puede ayudar con la consulta de medios.

Este es un codepen de la tabla en formato normal: https://codepen.io/Mickael/pen/MWEarKN

Actualmente solo estoy utilizando una tabla HTML estándar:

<tr> <td>5</td> <td>Lando Norris</td> <td class="drv_num">4</td> <td>McLaren F1 Team</td> <td>153<span style="visibility: hidden;">.0</span></td> </tr>

Aquí hay una respuesta algo útil utilizando Divs:

https://stackoverflow.com/questions/32938384/making-table-content-responsive-to-screen-size

Pero el problema con esa respuesta es que solo mueve todo uno encima del otro y no muestra los encabezados.

Cualquier ayuda o consejo con algún código para que pueda comenzar me sería de gran ayuda.

Un saludo,
M.

davy.ai

July 12, 2023 at 1:30 am

Basado en la información y ejemplos proporcionados, sugeriría utilizar una combinación de Flex y Grid para el trabajo. Flex es ideal para reordenar y envolver elementos, mientras que Grid proporciona un mayor control sobre la disposición y posición de los elementos.

Para lograr la disposición deseada en tabletas y pantallas más anchas, podrías utilizar un grid de 2×2 con Col1 y Col3 en la primera fila y Col2 y Col4 en la segunda fila. Para pantallas móviles, podrías utilizar un flexbox con la propiedad de orden para reordenar las columnas.

Aquí tienes un ejemplo de cómo podrías estructurar el HTML utilizando Grid:

<div class="grid">
  <div class="col1">Col1</div>
  <div class="col3">Col3</div>
  <div class="col2">Col2</div>
  <div class="col4">Col4</div>
</div>

Y aquí tienes un ejemplo de cómo podrías estilizar el grid y el flexbox utilizando CSS:

/* Grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 10px;
}

.col1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.col3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.col2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.col4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* Flexbox */
@media screen and (max-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .col1 {
    width: 100%;
  }

  .col2 {
    order: 1;
    width: 50%;
  }

  .col3 {
    order: 3;
    width: 50%;
  }

  .col4 {
    order: 2;
    width: 100%;
  }
}

Ten en cuenta que los ejemplos anteriores son solo un punto de partida y deberás adaptarlos según tus necesidades y requisitos específicos. Además, asegúrate de probar la disposición en diferentes dispositivos y tamaños de pantalla para asegurarte de que funcione como se espera.

En cuanto a la actualización dinámica del contenido de la tabla utilizando JavaScript, puedes utilizar cualquier framework o biblioteca de JavaScript de tu elección (por ejemplo, jQuery, React, Vue). Simplemente necesitarás obtener los datos del servidor utilizando Node.js y luego actualizar el HTML correspondiente mediante JavaScript.

Answer

davy.ai

July 12, 2023 at 1:30 am
Basado en la información y ejemplos proporcionados, sugeriría utilizar una combinación de Flex y Grid para el trabajo. Flex es ideal para reordenar y envolver elementos, mientras que Grid proporciona un mayor control sobre la disposición y posición de los elementos.

Para lograr la disposición deseada en tabletas y pantallas más anchas, podrías utilizar un grid de 2×2 con Col1 y Col3 en la primera fila y Col2 y Col4 en la segunda fila. Para pantallas móviles, podrías utilizar un flexbox con la propiedad de orden para reordenar las columnas.

Aquí tienes un ejemplo de cómo podrías estructurar el HTML utilizando Grid:
```
<div class="grid">
  <div class="col1">Col1</div>
  <div class="col3">Col3</div>
  <div class="col2">Col2</div>
  <div class="col4">Col4</div>
</div>
```
Y aquí tienes un ejemplo de cómo podrías estilizar el grid y el flexbox utilizando CSS:
```
/* Grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 10px;
}

.col1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.col3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.col2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.col4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* Flexbox */
@media screen and (max-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .col1 {
    width: 100%;
  }

  .col2 {
    order: 1;
    width: 50%;
  }

  .col3 {
    order: 3;
    width: 50%;
  }

  .col4 {
    order: 2;
    width: 100%;
  }
}
```
Ten en cuenta que los ejemplos anteriores son solo un punto de partida y deberás adaptarlos según tus necesidades y requisitos específicos. Además, asegúrate de probar la disposición en diferentes dispositivos y tamaños de pantalla para asegurarte de que funcione como se espera.

En cuanto a la actualización dinámica del contenido de la tabla utilizando JavaScript, puedes utilizar cualquier framework o biblioteca de JavaScript de tu elección (por ejemplo, jQuery, React, Vue). Simplemente necesitarás obtener los datos del servidor utilizando Node.js y luego actualizar el HTML correspondiente mediante JavaScript.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Diseño dinámico de tablas según el tamaño de la pantalla…

Answer

davy.ai