¿Por qué no se aplica Colspan como se esperaba?

Tengo una tabla de acuerdo a lo siguiente. La segunda fila ha definido tres columnas, una con colspan=8 y las otras con colspan=1. Aún así, las celdas no se estiran según el colspan, el "ancho" es un poco más para la segunda celda y más ancho para la tercera.¿Por qué no se aplica Colspan como se esperaba?

<table class="floating simpletable"> 
    <tbody> 
     <tr><td colspan="10">1st row</td></tr> 
     <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr> 
     <tr><td colspan="10">3rd row</td></tr> 
     <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr> 
    </tbody> 
</table>

¿Cuál es el problema y cómo solucionarlo?

Fuente

2012-02-13 Nicsoft

¿Dónde está la fila que contiene 10 celdas? – ZippyV

Esa es la primera fila. ¿Tengo que definir la fila con 10 celdas de alguna manera? – Nicsoft

-1 ¿para qué? ¡por favor comenta! – Nicsoft

El ancho de las celdas depende del contenido de la celda, los ajustes de HTML y CSS para el ancho, el navegador y posiblemente la fase de la luna. El atributo colspan solo especifica cuántas columnas (por lo tanto, cuántas ranuras en la cuadrícula para la tabla) ocupa una celda.

Si ve la última celda de la fila 2 como la más ancha, es probable que tenga la mayoría de los contenidos (o hay una configuración de ancho para ella). Su código de demostración no muestra dicho comportamiento.

Si no desea que los anchos de columna se ajusten a los requisitos de tamaño de las celdas, establezca los anchos explícitamente en CSS (o en HTML). Antes de esto, es mejor eliminar todas las complicaciones innecesarias de la estructura de la tabla. Si su código de demostración refleja toda la estructura, entonces las columnas 2 a 8 son una división innecesaria, es decir, podrían convertirse en una sola columna. Demostración (con anchos de píxeles pobres de estilo sólo para definitud):

<table class="floating simpletable" border> 
    <col width=100><col width=100><col width=100> 
    <tbody> 
     <tr><td colspan="4">1st row</td></tr> 
     <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr> 
     <tr><td colspan="4">3rd row</td></tr> 
     <tr><td>span</td><td colspan="3">other span</td></tr> 
    </tbody> 
</table>

Sin una reescritura como este, me temo que su tabla infringe el modelo de tabla de HTML, ya que actualmente no existe una célula que comienza en la columna 3 o columna 4 o ...

Fuente

2012-02-13 09:00:21

Mi ejemplo es el real que no está funcionando. Pero su sugerencia al agregar una etiqueta para cada columna lo resolvió. Agregué diez de esos y establecí el ancho = 10% para cada uno. ¡Gracias! Pero en su ejemplo, usted solo agregó tres , ¿no deberían ser cuatro porque usa colspan = 4? – Nicsoft

En mi demostración, la última columna simplemente toma lo que necesita. Para lograr lo que creo que pretendes, podrías usar (al utilizar mi marcado) ''. Su enfoque de diez columnas cada 10% de ancho probablemente no sea robusto, ya que no soluciona el problema del modelo de tabla. –

Ok, entiendo por qué dejaste fuera el último col. Pero al leer sobre el modelo de tabla, el cliente debe usar el para decidir el número de columnas, así que supongo que no es incorrecto tener un para cada columna. ¿Podría explicar por qué mi camino no es tan robusto como su camino? Tal vez me falta algo de comprensión del modelo de tabla ... – Nicsoft

colspan determina la cantidad de columnas que una celda se superpone, no el tamaño de esas columnas. Use la propiedad CSS width para especificar el ancho de las cosas.

Fuente

2012-02-13 08:17:47 Quentin

En realidad no es de las células que quiero decir, solo mi fraseo que tal vez no estaba claro. Lo arreglaré. – Nicsoft

¿Por qué no se aplica Colspan como se esperaba?

Respuesta

Cuestiones relacionadas