Perché colspan non è applicato come previsto

Ho una tabella come segue. La seconda riga ha definito tre colonne, una con colspan=8 e le altre con colspan=1. Tuttavia, le celle non sono allungate secondo il colspan, la "larghezza" è un po 'più per la seconda cella e la più ampia per la terza.Perché colspan non è applicato come previsto

<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>

Qual è il problema e come risolvere il problema?

fonte

2012-02-13 Nicsoft

Dove si trova la riga che contiene 10 celle? – ZippyV

Questa è la prima riga. Devo definire la riga con 10 celle in qualche modo? – Nicsoft

-1 per cosa? per favore, commenta! – Nicsoft

Le larghezze delle cellule dipendono contenuto delle celle, HTML e CSS impostazioni per larghezze, del browser, ed eventualmente fase della luna. L'attributo colspan specifica solo quante colonne (e quindi quanti slot nella griglia per la tabella) occupa una cella.

Se si vede l'ultima cella della riga 2 come la più ampia, allora la ragione è probabilmente che ha la maggior parte dei contenuti (o v'è una impostazione per esso larghezza). Il tuo codice demo non dimostra questo comportamento.

Se non si vuole che la colonna larghezze adattano alle esigenze dimensioni delle cellule, impostare la larghezza in modo esplicito in CSS (o in HTML). Prima di questo, è meglio rimuovere tutte le complicazioni inutili dalla struttura della tabella. Se il codice demo riflette l'intera struttura, le colonne da 2 a 8 sono una divisione non necessaria, ovvero potrebbero essere trasformate in una singola colonna. Dimostrazione (con larghezza di scarsa in stile pixel solo per definitezza):

<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>

Senza una riscrittura come questo, temo che il vostro tavolo viola il modello di tabella di HTML, come attualmente non ci sono celle che inizia nella colonna 3 o colonna 4 o ...

fonte

2012-02-13 09:00:21

Il mio esempio è quello attuale che non funziona. Ma il tuo suggerimento aggiungendo un tag per ogni colonna lo ha risolto. Ne ho aggiunti dieci e ho impostato la larghezza = 10% per ciascuno. Grazie! Ma nel tuo esempio hai aggiunto solo tre , non dovrebbero essere quattro di quelli visto che usi colspan = 4? – Nicsoft

Nella mia demo, l'ultima colonna prende solo ciò di cui ha bisogno. Per ottenere ciò che penso tu stia mirando, puoi usare (quando usi il mio markup) ''. Il tuo approccio di dieci colonne di larghezza pari al 10% non è probabilmente robusto, in quanto non risolve il problema del modello di tabella. –

Ok, capisco perché hai lasciato fuori l'ultima colonna. Ma leggendo il modello della tabella, il cliente dovrebbe usare lo per decidere il numero di colonne, quindi immagino che non sia sbagliato avere uno per ogni colonna. Potresti spiegare perché la mia strada non è robusta come la tua strada? Forse mi manca un po 'di comprensione del modello di tabella ... – Nicsoft

colspan determina quante colonne sovrappone una cella, non la dimensione di tali colonne. Utilizzare la proprietà CSS width per specificare la larghezza delle cose.

fonte

2012-02-13 08:17:47 Quentin

In realtà non sono le celle che sto dicendo, solo il mio fraseggio che forse era un po 'oscuro. Lo aggiusterò. – Nicsoft

Perché colspan non è applicato come previsto

risposta

Problemi correlati