拉伸嵌套表在細胞

Question

以下的http://jsfiddle.net/mark69_fnd/LftRY/上鉻的快照：

通告，其旨在用於地址內表沒有被正確拉伸 - 它們是一個或兩個像素短於他們的右側。這是儘管在CSS中的表元素的100％寬度，沒有填充/邊距。

如何讓這些表佔據封閉單元的完整空間？

謝謝。

編輯

所有的瀏覽器都表現出某種問題。我的代碼在Chrome，IE9，Firefox中都沒有顯示正確的拉伸。

EDIT2

火狐 - 同樣的問題，但在左側：

IE9 - 同樣的問題，但對 「條例爲」 右側和上左側 「艦」：

EDIT3

我都使出表，因爲我只是不能使它與<div>工作，並擁有所有正確的排列和拉伸的元素。如果有人發佈解答所有描述問題的答覆，並且與基於表格的解決方案行爲相同 - 我會很樂意相信並採用它。

Answer 1

我不使用表的忠實粉絲，但在這種情況下表是迄今爲止最好的解決方案。這是畢竟你將要顯示的表格數據。

那個說，我不認爲你應該在這裏使用嵌套表，它只是使事情變得複雜。只要繼續與您的集體合作，您就可以輕鬆達到相同的結果。它也將消除您現在遇到的邊界問題。看看這個：http://jsfiddle.net/LftRY/21/

請注意，也對input css進行了一些更改。我刪除了所有邊框，填充和邊距，所以我可以將它們設置爲100％寬度，以強制它們採用與其父項相同的寬度。我還刪除了HTML中的<br>標籤，並將輸入設置爲塊元素顯示。除非絕對需要（這種情況很少見），我不喜歡使用<br>。

我還添加了類，.no-lines，至極，你可以在你想顯示無國界單元格或行使用。正如你所看到的，我在標題中的兩個地址之間的'間隙'以及我作爲例子添加的頁腳上使用了它們。如果你願意，你甚至可以在整行上使用它。

此外，我冒昧地將thead,tbody和tfoot標記添加到表html中。這將改善使用屏幕閱讀器的人的訪問，對SEO更好，並且在語義上更加正確。

希望這是你在哪裏之後。如果沒有，請隨時詢問！

Answer 2

如何讓這些表佔據封閉單元的完整空間？

你已經做到了。然而，你在想什麼「封閉單元的完整空間」會構成什麼，在你所呻吟的瀏覽器中在技術上是錯誤的。

這是100％的寬度，完全填滿。正如@bažmegakapa在上面評論過的，你應該重新考慮你如何繪製邊界，例如你可能只是想不折疊它們，更喜歡內部以上的外部邊界（或者相反，但比現在更嚴格）來更容易跨瀏覽器風格的邊界。

否則，深入細節並學習 - 即使有試驗和錯誤 - 如何摺疊邊框以滿足您的需求。

http://jsfiddle.net/LftRY/3/