如何將div寬度設置爲表格的寬度？

我有一個div，其中包含一個table。除了我不知道如何設置div的width以使其增長爲table內部的width，所有內容都按我的意圖工作。我怎樣才能做到這一點？謝謝。如何將div寬度設置爲表格的寬度？

這是div的CSS代碼：

#events-table-wrapper { 
    margin-left: auto; 
    margin-right: auto; 
    width: 500px; 
    margin-top: 100px; 
    border: 1px solid #CCC; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
}

設置width到auto沒有幫助。順便說一句，我沒有改變CSS中的表中的任何東西。

編輯：這是一個真人版：http://jsfiddle.net/ZDF2U/

來源

2012-10-09 Loolooii

你有一個真人版？ –

@ user1136076 http://jsfiddle.net/ZDF2U/ – Loolooii

在你的情況，你也可以做在div：

display: table;

這裏的的jsfiddle：http://jsfiddle.net/leniel/Et3t5/

這裏的另一個的jsfiddle向您展示了一個類似的情況：http://jsfiddle.net/leniel/T7DTc/

如果div的width: auto;那麼它擴展到容納表內的textarea。如果您將其設置爲width: 500px;那麼textarea會在div之外增長。

所以解決方案看起來像設置width: auto;。當然，你的代碼中有些特殊的東西可能會造成干擾。

來源

2012-10-09 16:17:16

在這種情況下，div具有整個頁面的寬度。 – Loolooii

非常好的解決方案。比將桌子寬度設置爲100％更好。謝謝！ – Loolooii

設置table { width:100% }解決了它。現在我可以保持div夠大，桌子恰好適合它。謝謝。

來源

2012-10-09 16:20:23 Loolooii

Leniel的解決方案更好。這一個仍然需要你弄亂div的寬度。 – Loolooii

使包含表inline-block的股利。即display: inline-block。這將強制它在塊內呈現內聯。或者display: table也可以工作。

鏈接到的jsfiddle：http://jsfiddle.net/Mr9jQ/

來源

2012-10-09 16:21:29 ranieuwe

你也可以改變的div屬性是

float:left; 
width:auto;

來源

2012-10-09 16:24:24

如何將div寬度設置爲表格的寬度？

回答

相關問題