具有百分比值的表格單元格寬度如何工作？

假定我們的HTML：

<div>What the hack ?</div>

而我們的CSS：

div { 
    width: 100%; 
    display: table-cell; 
    background: pink; 
}

你會發現<div>的寬度表現得像一個浮動元素：它與內容一樣大，而不是拉伸到兩邊。

現在開始遞減的寬度，突然你會看到<div>增長。

這裏有一個互動演示：

http://dabblet.com/gist/9891801

這是爲什麼？它是如何工作的？

來源

2014-03-31 Arthur Corenzan

解釋的。如果您刪除顯示：表單元格css對我有用 –

是否帶有'table-layout：fixed'？當你想設置寬度時，這會改變一切，因爲有兩種不同的算法：適合內容或 - 嘗試 - 服從作者（你）。但是你的問題可能與[匿名錶對象]（http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes）有關（單元格有父行和父表;如果不是，將來自任何地方）。 – FelipeAls

我不知道'table-layout'我正在調查它，謝謝@FelipeAls –

這裏的數學：

表細胞對100％的寬度意味着你必須每行一個單細胞的表。已知寬度 - 在您的情況下 - 是文本寬度（89px）。

如果我們把表單元格的寬度爲50％，這意味着電池是作爲整個表格的寬度的一半寬。我們將已知寬度加倍到178px。

結論，最終的寬度爲100/{表單元格的寬度} * {元素的offsetWidth}

爲什麼出現這種情況與已經發布的鏈接http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

來源

2014-04-01 15:31:19 oliveiraev

你真的需要display: table-cell;財產？

如果刪除了DIV做工不錯！

但是如果你想要一個解釋剛纔看到this

來源

2014-03-31 13:34:15

謝謝，但你沒有回答我的問題。我不是在尋求幫助來開發一個佈局，我問爲什麼當一個元素顯示爲'table-cell'時，一個較小的百分比寬度會使元素變寬。即在這種情況下如何計算百分比值。 –

你的鏈接是相關的，但仍不能解釋爲什麼會發生這種情況。無論如何，我正在閱讀更多。謝謝。 –

沒問題！很高興幫助 –

具有百分比值的表格單元格寬度如何工作？

回答

相關問題