具有固定寬度的表格列跨度混亂

Question

欲用1個小和2大柱像這樣固定寬度的表：使用

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

---

然後我要添加一個

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

與colspan = 2的特大號col如此

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

使用

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

---

但我跟上結束了：

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

---

更圖形化的例子is found on jsbin

** 版它 **

對不起，我錯過了一個細節： 我必須使用（或因此我認爲..？）table-layout: fixed，因爲我有細胞的一些特殊性質四溢：

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

Updated jsbin found here 。

Answer 1

你也可以使用colgroup和col設置寬度：

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

使用CSS：

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

這樣你就不需要給每個td一個類，這樣當你想改變類名時就更容易了。

JSFiddle demo

Answer 2

變化表佈局：固定到汽車

table { 
    table-layout: auto; 
} 

找到工作演示在這裏：http://jsbin.com/atohug/2/edit