爲什麼不顯示：表格行上的塊和100％寬度工作？

有display: block的表格行無法獲得父表格的100％寬度，當它們具有display: table-row時，它們自然會獲得100％寬度，但是CSS值有一些其他副作用，我現在嘗試避免。爲什麼不顯示：表格行上的塊和100％寬度工作？

是什麼原因導致錶行像這樣，而不是像正常的塊級元素？

你嘗試在TBODY將顯示塊？ – 2014-09-02 14:51:19

是的，但這種逆轉問題和顯示行：錶行不會獲得100％的寬度。我很好奇這個問題的根源，而不僅僅是一個「補丁」。 – 2014-09-02 14:55:59

你爲什麼需要它？它已經定義爲一個表格。 – Riskbreaker 2014-09-02 15:02:23

此行爲與如何在瀏覽器上處理表格有關。

table元素設置爲display:table。 tr是display:table-row，並且td是display:table-cell。如果你正在創建一個基於div的css表格，它的工作原理是一樣的。

在這個小提琴上：http://jsfiddle.net/rv4v2964/1/，我創建了相同的基本示例，但用div代替，並添加了嵌套到表的block元素，但是關閉了任何行或單元格。

您可以注意到它保持限制在第一個單元格的寬度。其中一個原因是在this article指出：

...表和列的寬度是由表和col元素的寬度，或通過細胞的第一行的寬度設定...

這意味着當一個元素對於表結構而言是奇數時，第一個單元格的寬度設置整個列的值。這實際上是在W3上指定一個table-layout行爲：

...第一行中的單元與用於「width」屬性不是「自動」以外的值確定的寬度爲該列...

另一篇文章提到在每個瀏覽器上如何威脅表結構中的元素的不同行爲。 http://snook.ca/archives/html_and_css/getting_your_di

結論

瀏覽器不，當你創建表，它的元素是不應該有內部發生一樣。這很可能是我錯誤地渲染的。它將計算第一個單元格的寬度作爲其參數。

在這種特定情況下，解決方法可能會將顯示設置爲display: table-caption;，該表格會佔用整個表格的寬度。然後，將屬性caption-side設置爲bottom，它將保留在表格的底部。

2014-09-02 15:46:03 LcSalazar

這是一個超出我預期的解釋，謝謝！ :) – 2014-09-02 22:47:25

回答