爲什麼我的固定佈局表不如其列？

Question

根據CSS規範，當一個表具有table-layout:fixed屬性，其寬度被計算如下：

...每列的寬度被確定爲如下：

1. A柱對於'width'屬性，值爲'auto'以外的值設置該列的寬度。

2. 否則，'width'屬性的第一行中'auto'值以外的單元格將確定該列的寬度。如果單元格跨越多個列，則寬度將在列上劃分。

3. 任何剩餘的列等分剩餘的水平表空間（減去邊框或單元格間距）。

表的寬度，則該表元素中的「width」屬性的值和列寬（加上單元格間隔或邊框）的總和大。

我的這種認識是：

1. 每一列的寬度進行計算（用<col>元件的width屬性，如果存在的話，取優先）
2. 列寬進行合計
3. 如果列寬度總和大於<table>元素的width屬性，則該表格將與列寬度總和一樣寬。

但是 - 在下面的示例中，我有一個表，其中一行包含三個單元格。使用<col>元素將每列的寬度設置爲100像素。表元素沒有分配寬度，它是一個寬度爲200像素的<div>的孩子。

我希望表的寬度爲300像素，因此它溢出其父母<div>。然而，相反，該表只有200個像素寬（即，與其父母<div>一樣寬），因此每列被縮小爲66.6個像素寬。 （我已經檢查過最新的Safari，Chrome，Firefox和Edge）。

爲什麼表格只有200像素寬，而不是300像素？

<div style="background:black; color:white; width:300px;">300px</div> 
 

 
<br> 
 

 
<div style="background:black; color:white; width:200px;">200px</div> 
 

 
<br> 
 

 
<div style="width:200px; background:green; overflow:scroll;"> 
 
    <table style="table-layout:fixed; border-collapse:collapse;"> 
 
    <col style="width:100px;"> 
 
    <col style="width:100px;"> 
 
    <col style="width:100px;"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td style="background:red;">3</td> 
 
    </tr> 
 
    </table> 
 
</div>

（我已經給<div>綠色背景和overflow:hidden，第三單元的紅色背景，使意想不到的結果更加清晰。）

Answer 1

你是正確的你對規則的解釋。問題在於表格的寬度沒有設置，所以瀏覽器無法與列寬和進行比較。只需設置表格的寬度，即使width: 0px也可以使用。

<div style="background:black; color:white; width:300px;">300px</div> 
 

 
<br> 
 

 
<div style="background:black; color:white; width:200px;">200px</div> 
 

 
<br> 
 

 
<div style="width:200px; background:green; overflow:scroll;"> 
 
    <table style="table-layout:fixed; border-collapse:collapse;width:0px"> 
 
    <col style="width:100px;"> 
 
    <col style="width:100px;"> 
 
    <col style="width:100px;"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td style="background:red;">3</td> 
 
    </tr> 
 
    </table> 
 
</div>