pasticci colspan con tavolo larghezza fissa

Question

voglio una tabella a larghezza fissa con 1 piccola e 2 grandi colonne in questo modo:

|..|....|....| 
|..|....|....| 
|..|....|....| 

utilizzando

td.small { width: 20% } 
td.large { width: 40% } 

---

poi voglio aggiungere un col grande extra con colspan = 2

|.......|....| 
|..|....|....| 
|..|....|....| 

utilizzo

td.small { width: 20% } 
td.large { width: 40% } 
td.extralarge { width: 60% } /* 20+40=60 */ 

---

Ma continuo a finire con:

|.......|....| 
|...|...|....| 
|...|...|....| 

---

Un esempio più grafica is found on jsbin

** ed si **

dispiace, ho perso un dettaglio: devo usare (o almeno così credo ..?) table-layout: fixed dal momento che sto avendo alcune proprietà speciali traboccanti delle cellule:

td { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 

Updated jsbin found here .

Answer 1

Si potrebbe anche usare colgroup e col per impostare la larghezza:

<table> 
    <colgroup> 
     <col class="short" /> 
     <col span="2" class="long" /> 
    </colgroup> 
    <tr> 
     <td>Short</td> 
     <td>Long long long long</td> 
     <td>Long long long long</td> 
    </tr> 
    <tr> 
     <td>Short</td> 
     <td>Long long long long</td> 
     <td>Long long long long</td> 
    </tr> 
    <tr> 
     <td>Short</td> 
     <td>Long long long long</td> 
     <td>Long long long long</td> 
    </tr> 
</table> 

Con questo CSS:

table { width: 100%; } 
.short { 
    background: lightblue; 
    width: 20% 
} 
.long { 
    background: lightgreen; 
    width: 40%; 
} 
.multiCells { background: #F3A633; } 

In questo modo non è necessario assegnare ad ogni classe una classe, è più semplice quando si desidera modificare il nome della classe.

JSFiddle demo

Answer 2

modificare la tabella layout: fisso per l'auto

table { 
    table-layout: auto; 
} 

Trova il lavoro demo qui: http://jsbin.com/atohug/2/edit