html<div class="tabla-avia-contenedor"> <table class="tabla-avia-personalizada"> <thead> <tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> <!-- Las celdas 4, 5, 6, 7 y 8 se fusionan en una sola usando colspan="5" --> <th colspan="5" class="celda-fusionada">Celdas 4 a 8 Fusionadas</th> <th>Columna 9</th> </tr> </thead> <tbody> <tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> <td>Dato 4</td> <td>Dato 5</td> <td>Dato 6</td> <td>Dato 7</td> <td>Dato 8</td> <td>Dato 9</td> </tr> </tbody> </table> </div> <style> /* Estilos para adaptar la tabla al diseño de Avia / Enfold */ .tabla-avia-contenedor { width: 100%; overflow-x: auto; /* Permite scroll horizontal en móviles */ margin: 20px 0; } .tabla-avia-personalizada { width: 100%; border-collapse: collapse; font-family: inherit; color: #333333; } .tabla-avia-personalizada th, .tabla-avia-personalizada td { border: 1px solid #e1e1e1; padding: 12px; text-align: center; font-size: 14px; } /* Color de fondo para la fila superior (Cabecera) */ .tabla-avia-personalizada thead tr { background-color: #f8f8f8; font-weight: bold; } /* Estilo destacado para la celda fusionada */ .tabla-avia-personalizada .celda-fusionada { background-color: #f0f0f0; color: #000000; } /* Color alterno para la fila de datos */ .tabla-avia-personalizada tbody tr { background-color: #ffffff; } /* Efecto al pasar el mouse por encima */ .tabla-avia-personalizada tbody tr:hover { background-color: #fafafa; } </style>