0

Tengo un problema a la hora de crear una tabla. Mi objetivo es crear el siguiente diseño:
introducir la descripción de la imagen aquí

Pero no logro el resultado deseado. Aquí esta mi código:

<table style='width:100%;'>
    <tr>
        <td colspan='2'>Abarca 2 columnas</td>
        <td colspan='1'>Abarca 1 columna</td>
    </tr>
    <tr>
        <td colspan='1'>Abarca 1 columna</td>
        <td colspan='2'>Abarca 2 columnas</td>
    </tr>
</table>

Intenté omitir los colspan='1' pero el resultado es el mismo. Esta tabla la necesito para crear un PDF usando la librería pdfkit de Python, por lo tanto no puedo usar ni flexbox y grid (solo las clásicas tablas HTML).

2
  • Debes tener 3 columnas. Al usar colspan unes 2 y te queda una.
    – Lobos
    Commented el 24 feb. 2022 a las 2:39
  • @Lobos, una disculpa estaba escribiendo la respuesta al mismo tiempo que llegó tu comentario, si deseas escribir tu respuesta puedo borrar la mía Commented el 24 feb. 2022 a las 2:41

1 respuesta 1

0

Buen día,

Una solución sería dividir tu tabla en columnas del mismo ancho para crear una tercera columna "fantasma" y luego utilizar colspan en las columnas reales

table, th, td {
  border:1px solid black;
}
<table style='width:100%;'>
  <col width="33%"><col width="33%"><col width="33%">
  <tr>
    <td colspan='2'>Abarca 2 columnas</td>
    <td colspan='1'>Abarca 1 columna</td>
  </tr>
  <tr>
    <td colspan='1'>Abarca 1 columna</td>
    <td colspan='2'>Abarca 2 columnas</td>
  </tr>
</table>

2
  • Muchas gracias me sirvió. Y en el caso de que fueran mas columnas, ¿hay que agregar las etiquetas col una por una o hay una forma de hacerlo automático?
    – user227086
    Commented el 24 feb. 2022 a las 2:50
  • Esto era necesario porque tu tienes 2 celdas por fila, es decir tienes 2 columnas por fila pero necesitabas una tercera columna para poder crear el efecto que quieres. Si vas a tener que hacer lo mismo con muchas celdas de tamaños diferentes podrías crear digamos 20 columnas, cada una de 5% y entonces vas a tener más flexibilidad en el ancho de las columnas Commented el 24 feb. 2022 a las 3:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.