Tabla responsive

Tabla responsive

de Carlos Navarro -
Número de respuestas: 5

Un saludo a todos,

Nos gustaría crear una tabla de 2 columnas y 1 fila pero que al cambiar de dispositivo de un PC a un movil la tabla se transforme a una de 1 columna 2 filas, algo como la imagen a continuación

image.png

Lo he conseguido pero funciona bien  en una página web, y al ingresar el código a una etiqueta dentro de moodle no hace el ajuste.

a continuación le comparto el código que estamos utilizando para la etiqueta

    <div style="display: flex; flex-wrap: wrap; width: 90%; max-width: 1200px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; margin: 20px;">
        <div style="padding: 20px; box-sizing: border-box;">
            <h2>Contenidos del módulo:</h2>
            <ul>
                <li>Tema 1. </li>
                <li>Tema 2. </li>
                <li>Tema 3. </li>
                <li>Tema 4. </li>
            </ul>
        </div>
        <div style="padding: 20px; box-sizing: border-box;">
            <img src="#" alt="Tecnología">
        </div>
    </div>
<style>
        @media (max-width: 768px) {
            .left-column, .right-column {
                width: 100%;
            }
        }
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            .container {
                width: 100%;
                box-shadow: none;
            }
            .left-column, .right-column {
                padding: 10px;
            }
        }
    </style>

La parte del style que contiene los @media moodle la elimina al momento de guardar.

Les adjunto el código que funciona en una página web.

Me gustaría saber si hay alguna forma de construir este tipo de tabla dentro de una etiqueta

Estamos trabajando con moodle 4.1.11

Muchas gracias

Promedio de valoraciones: -
En respuesta a Carlos Navarro

Re: Tabla responsive

de Robinson León Díaz -
Intenta con este codigo:

<div style="display: flex; flex-wrap: wrap; width: 90%; max-width: 1200px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; margin: 20px;">
  <!-- Columna izquierda -->
  <div style="flex: 1 1 100%; padding: 20px; box-sizing: border-box;">
    <h2>Contenidos del módulo:</h2>
    <ul>
      <li>Tema 1. </li>
      <li>Tema 2. </li>
      <li>Tema 3. </li>
      <li>Tema 4. </li>
    </ul>
  </div>
  <!-- Columna derecha -->
  <div style="flex: 1 1 100%; padding: 20px; box-sizing: border-box; text-align: center;">
    <img src="#" alt="Tecnología" style="max-width: 100%; height: auto; border-radius: 8px;">
  </div>
</div>

 
 
Promedio de valoraciones: -
En respuesta a Robinson León Díaz

Re: Tabla responsive

de Carlos Navarro -

Hola Robinson, 

Gracias por tu respuesta, te comento al colocarlo dentro de la etiqueta me muestra una tabla de 1 columna y 2 filas desde el principio, como te lo dejo en la imagen

image.png

Lo que quiero hacer es que una tabla de 1 fila 2 columnas (vista desde una PC) se transforme en una de 2 filas 1 columna al visualizarla desde un movil.

Saludos

Promedio de valoraciones: -
En respuesta a Carlos Navarro

Re: Tabla responsive

de Bruna Lamberti -

¿Hay alguna posibilidad de que luego de guardar alguien haya editado con algún editor que no sea el de texto plano? Siempre que sumé detalles de estilo desde el editor configurado en área de texto plano funcionaron bien, pero al entrar con el editor por defeto, Atto, u otros, aunque no se toque nada de eso, se borra todo lo contenido entre las etiquetas <style></style>

Si no se debe a eso, quizás alguna de estas opciones sirve, espero que así sea:

  1. Queries en línea: <div style="display: flex; flex-wrap: wrap; width: 90%; max-width: 1200px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; margin: 20px; padding: 20px; box-sizing: border-box;">
        <div style="flex: 1 1 50%; max-width: 50%; padding: 20px; box-sizing: border-box; @media (max-width: 768px) { flex: 1 1 100%; max-width: 100%; } @media (max-width: 480px) { padding: 10px; }">
            <h2>Contenidos del módulo:</h2>
            <ul>
                <li>Tema 1.</li>
                <li>Tema 2.</li>
                <li>Tema 3.</li>
                <li>Tema 4.</li>
            </ul>
        </div>
        <div style="flex: 1 1 50%; max-width: 50%; padding: 20px; box-sizing: border-box; @media (max-width: 768px) { flex: 1 1 100%; max-width: 100%; } @media (max-width: 480px) { padding: 10px; }">
            <img src="#" alt="Tecnología" style="width: 100%; height: auto;">
        </div>
    </div>
  2. Sin queries, con ajuste de width:

<div style="display: flex; flex-wrap: wrap; width: 90%; max-width: 1200px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; margin: 20px; padding: 20px; box-sizing: border-box;">
    <div style="flex: 1 1 auto; width: 50%; max-width: 600px; min-width: 300px; padding: 20px; box-sizing: border-box;">
        <h2>Contenidos del módulo:</h2>
        <ul>
            <li>Tema 1.</li>
            <li>Tema 2.</li>
            <li>Tema 3.</li>
            <li>Tema 4.</li>
        </ul>
    </div>
    <div style="flex: 1 1 auto; width: 50%; max-width: 600px; min-width: 300px; padding: 20px; box-sizing: border-box;">
        <img src="#" alt="Tecnología" style="width: 100%; height: auto;">
    </div>
</div>

¿Me contás si funciona?

Promedio de valoraciones:Útil (1)
En respuesta a Bruna Lamberti

Re: Tabla responsive

de Carlos Navarro -

Hola Bruna, 

Si la edición de la tabla la hacíamos desde el editor Arto, hice la prueba desde el texto plano y me funcionó. 

Muchas gracias a todos por su ayuda. 

Promedio de valoraciones: -