如何修復表格佈局？

Question

如何修復表格佈局？ 根據17.5.2.1「固定表佈局」（從W3）：

在固定表格佈局算法中，每個列的寬度被確定爲如下：

1.A柱元件具有'width'屬性的值'auto'設置該列的寬度。

2.Otherwise中，第一行具有比的「width」屬性「自動」以外的值在一個小區確定用於該列的寬度。

我認爲首先我們檢查col元素的寬度，如果它設置爲像100px這樣的東西，那麼我們使用它，而不是其他。 但是，以下佈局證明我錯了。就好像瀏覽器計算MAX（col.width，first-td.width）。 我在這裏錯過了什麼？我誤解了W3的定義嗎？ 感謝

小提琴：

http://jsfiddle.net/91qozmnb/

HTML：

<table> 
    <colgroup> 
     <col /> 
     <col /> 
     <col /> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td>test1 
      </td> 
      <td>test2 
      </td> 
      <td>test3 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS：

table 
{ 
    table-layout:fixed; 
    border-spacing:0px; 
} 
table > colgroup > col:nth-child(1) 
{ 
    width:100px; 
} 
table > colgroup > col:nth-child(2) 
{ 
    width:150px; 
} 
table > colgroup > col:nth-child(3) 
{ 
    width:200px; 
} 
table > tbody > tr > td 
{ 
    border:5px solid lightgray; 
    padding:0px; 
    box-sizing:border-box; 
} 
table > tbody > tr > td:nth-child(1) 
{ 
    width:200px; 
} 
table > tbody > tr > td:nth-child(2) 
{ 
    width:150px; 
} 
table > tbody > tr > td:nth-child(3) 
{ 
    width:100px; 
} 

Answer 1

在規範中進一步閱讀，你會發現

17.5.2.1固定檯布局

利用這種（快速）算法，該表不 不依賴於單元格的內容的水平佈局;它僅取決於表的寬度，列的寬度以及邊框或單元格間距。

表格的寬度可以顯式地用「寬度」 屬性來指定。 「自動」（「：表顯示」和「顯示： 直列表」爲兩者）的值表示使用表自動佈局算法。 但是，如果表是一個塊級表（「顯示：表」）中 正常流動，UA可以（但不必）...

所以，如果你想要確保固定表格佈局是所用的所有，請設置表格的寬度屬性