使用混合px和％固定的表格佈局

Question

我最近發現，table-layout:fixed的表格可以正常工作，任何單位都設置爲列。 （絕對或相對）

我SCSS很簡單：我是混合PX和％

table { 
    table-layout: fixed; 
    width: 100%; 
    border-collapse: collapse; 
} 

td, 
th { 
    border: 1px solid; 

    &:nth-child(1) { 
    width: 150px; 
    } 
    &:nth-child(2) { 
    width: 150px; 
    } 
    &:nth-child(3) { 
    width: 200%; 
    } 
    &:nth-child(4) { 
    width: 100%; 
    } 
} 

所以即使列寬度比彙總表格的寬度 - 它工作得很好。我試圖尋找這種在W3C魔法的解釋，但發現只有這個

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

這些話大約剩餘，但不是在我的情況下溢出。請幫我在standarts中找到這種行爲的解釋，因爲我將在我的項目中使用它，但我不確定它不是一個錯誤或其他。

鏈接擺弄https://jsfiddle.net/chesminsky/ga3ev2ex/

PS：對不起，我的英語

Answer 1

剩餘的空間，與像素單元被設置之後，將在200％劃分爲3：RD柱和100％的4：日。

這意味着什麼剩下的2/3和1/3，所以如果您要將3：rd和4：th列更改爲66％和33％，您將以相同的最終結果結束，但如果您還可以製作像素寬度，它們或者以水平滾動溢出，或者與總寬度的像素寬度百分比相比延伸。

所以會發生什麼是，在2列，與他們的組合寬度，脫落容器總寬度，它計算的那些之前％，因爲像素寬度具有更高的優先級是固定的大小單元。

Src：https://www.w3.org/TR/CSS21/tables.html#width-layout

Answer 2

這是不是一個錯誤。你們看到的被稱爲包裝

如果你想改變，你可以在CSS

white-space: nowrap;

我定你的例子說明，你可以看到它的所有在一行。

JS fiddle