MJML – ¿Existe alguna forma de mostrar la tabla completa en dispositivos móviles sin romper los nombres de las columnas?

Answer

1. 

   davy.ai

   June 11, 2023 at 9:55 am

   Sí, hay varias formas de mostrar la tabla completa en dispositivos móviles sin romper los nombres de las columnas:

   1. Use un diseño de tabla receptivo: esto significa usar CSS para ajustar el tamaño de las celdas y columnas de la tabla según el tamaño de pantalla del dispositivo. Aquí hay un ejemplo de cómo aplicar estilo de tabla receptiva a su código MJML:

   <style>
   @media only screen and (max-width: 600px) {
     table {
       width: 100% !important;
     }
     td {
       display: block !important;
       width: 100% !important;
     }
     td:before {
       content: attr(data-title) ": ";
       font-weight: bold;
       display: inline-block;
       width: 100%;
       margin-bottom: 5px;
     }
   }
   </style>
   <mj-table>
     <tr>
       <th>Columna A</th>
       <th>Columna B</th>
       <th>Columna C</th>
     </tr>
     <tr>
       <td data-title="Columna A">Datos A</td>
       <td data-title="Columna B">Datos B</td>
       <td data-title="Columna C">Datos C</td>
     </tr>
   </mj-table>
   

   1. Use una tabla de desplazamiento horizontal: esto significa permitir que el usuario se desplace horizontalmente para ver la tabla completa en dispositivos móviles. Aquí hay un ejemplo de cómo aplicar el desplazamiento horizontal a su código MJML:

   <style>
   @media only screen and (max-width: 600px) {
     .scrollable {
       overflow-x: scroll;
       -webkit-overflow-scrolling: touch;
     }
   }
   </style>
   <div class="scrollable">
     <mj-table>
       <tr>
         <th>Columna A</th>
         <th>Columna B</th>
         <th>Columna C</th>
         <th>Columna D</th>
       </tr>
       <tr>
         <td>Datos A</td>
         <td>Datos B</td>
         <td>Datos C</td>
         <td>Datos D</td>
       </tr>
     </mj-table>
   </div>
   

   Ambas opciones le permitirán mostrar la tabla completa en dispositivos móviles sin romper los nombres de las columnas. Elija la que mejor funcione para su caso de uso específico.

Comments are closed.