禁用表格標籤中寬度的自動更改

Question

如何創建這樣的表格，但是由於數字「10」（2個密碼長）而沒有自動更改最後一列中的寬度。

<table> 
    <tr> 
     <td rowspan="3">1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td rowspan="2" colspan="2">7</td> 
    </tr> 
    <tr> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>8</td> 
     <td colspan="2">9</td> 
     <td>10</td> 
    </tr> 
</table> 

和CSS：

table { 
    border: 1px solid; 
    width: 400px; 
    height: 300px; 
} 

Answer 1

有2種算法在CSS表，由酒店table-layout觸發：

• table-layout:fixed將單元格寬度適應什麼作者（你）要儘可能地
• table-layout:auto（默認值）將使單元格寬度適應其內容。

CSS

table { 
    table-layout: fixed; 
    width: 400px; 
    height: 300px; 
    border: 1px solid; 
    } 

這裏有一個小提琴：http://jsfiddle.net/tk4J8/

Answer 2

不要使用column-width指定表列的寬度 - 這是一個suggested optimal guideline的瀏覽器是不是真的意味着固定寬度佈局。改爲使用colgroups。

在樣式表中刪除column-width風格，和之前的任何tr或td標籤添加到您的table標籤：

<colgroup> 
    <col span="1"></col> 
    <col span="1"></col> 
    <col span="1"></col> 
    <col span="1"></col> 
</colgroup> 

並添加到您的樣式表：

colgroup col { 
    width: 100px; 
} 

jsFiddle。

這是Mozilla documentation for it。