¿Cómo construir una tabla compleja usando CSS?

Question

Recientemente me encontré con una implementación tabla compleja, por ejemplo:

tr1: | td1 | td2 | td3 | 
tr2: | th | td | 
tr3: | th | td | 
... 

Como muestra este ejemplo, quiero dv1 y TD3 son de ancho fijo, td y TD2 se auto ancho para expandirse cuando la pantalla-radio/browser- ancho cambiado Me pregunto si hay una forma de hacerlo usando CSS.

Para que quede claro, ya usé el valor de colspan y ancho para mi propósito, pero ¿cómo puedo hacer que td1 sea más pequeño que th usando colspan y el valor de ancho? colspan no funciona, ni valor de ancho

Answer 1

Es una simple cuestión de ajustar las colspans correctamente.

Fila de encabezado de tabla: cada celda obtiene un grupo de 2 (3 celdas * 2 colspan = 6 celdas de colspan).
Filas del cuerpo de la tabla: cada celda obtiene un grupo de 3 (2 células * 3 colspan = 6 células colspan).

ACTUALIZACIÓN

Parece que hay una incongruencia que implica columnas que tiene tanto colspan y el conjunto de la anchura. Los navegadores parecen ignorar el valor del ancho e incluso el ancho máximo (el ancho mínimo funciona).

Ejemplo:

<table border="1" style="width: 50%;"> 
    <tr> 
     <td style="width: 100px;">td1</td> 
     <td colspan="2">td2</td> 
     <td style="width: 100px;">td3</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> 
     <td colspan="2">td2</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> 
     <td colspan="2">td2</td> 
    </tr> 
</table> 

Esto produce más o menos la salida deseada pero el Th1 columna º expande para que coincida con el mismo tamaño de la td siguiente (TD2). Ambos siempre ocupan el 50% de la tabla, a menos que la tabla sea más pequeña que 240px, luego th1 permanece a 120px.

Esto me parece inconsistente y no tengo solución alternativa, lo mejor es que compruebe si puede mostrar la tabla de manera diferente (es decir, el mismo número de columnas en todas las filas, incluido el encabezado (lo cual tendría más sentido de todos modos).

Answer 2

Si no especifica un ancho para td su ancho aumentará automáticamente según el contenido del mismo. Además, puede usar el colspan para ecualizar td según lo que desee ...

Answer 3

De ese ejemplo limitado, me parece que necesita dos tablas.

Uno para la fila superior (establecer explícitamente el ancho de TD1, TD3, y toda la tabla. Deje TD2 Expansión automática.

y otro para el resto de la mesa ... formato de ella lo que quieras, acaba de establecer el ancho de la tabla a la misma que la fila superior por lo que se ve como una tabla. es probable que tenga que ajustar los márgenes 0/relleno.

Eso, o se puede hacer que sea una mesa y hacer algo colspan hackeo.

Answer 4

Todas las celdas de una columna tienen el mismo ancho. Para que las celdas se extiendan sobre varias columnas, use el colspan atributo. Todas las celdas combinadas se expandirán para ocupar todo el ancho de la tabla.

Answer 5

Pruebe estos colspans:

tr1: | td1(1) | td2(2) | td3(1) | 
tr2: | td1(2) | td2(2)  | 
tr3: | td1(2) | td2(2)  | 
...