對於<table>元素，是否存在與「width：auto」等效的CSS聲明？

我試圖創建一個<表>，不超過一定的寬度（比方說500px），即使有任何尺寸的邊框。對於<table>元素，是否存在與「width：auto」等效的CSS聲明？

通常情況下，如果我這樣做：

（HTML）

<div> 
    <table> 
    <tr> 
     <td>This is a test.</td> 
    </tr> 
    </table> 
</div>

（CSS）

div { 
    width: 500px; 
} 
table { 
    width: 100%; 
    border: 10px solid #000; 
}

我要結束了一個<表e >即510px寬，因爲左右邊界的一半將最終在<div>的外部。我想要的是<表> 500px寬總數（即，它不超過其父/容器的寬度）。因此，左右邊框的寬度均爲10px，在500px寬的範圍內設置，其中包含<div> - 因此表格的剩餘內容區域將爲480px。

通過使用CSS聲明「width：auto。」，我可以很容易地將這種類型的東西帶到<div>。我可以通過添加一個額外的<div>圍繞它使用「寬度：自動」與邊框設置<div>，而不是<表>表。

但是，我希望存在一個更優雅的解決方案（必須跨瀏覽器）。有沒有我不知道的東西？

2009-10-26 Bungle

您使用的是什麼xhtml聲明？我認爲一個嚴格的聲明會導致一個480px的表格（邊界爲20px） – 2009-10-26 17:20:08

@adam ...將邊框添加到聲明的寬度。 – 2009-10-26 17:24:35

但是表格中沒有聲明的寬度 - 只在包含div上，所以只要框模型正確，表格+邊框不能大於500px – 2009-10-26 17:27:50

將div設置爲480px寬，並在其上放置10px邊框。然後將表格設置爲100％寬度

2009-10-26 22:15:02

偉大的，簡單的答案！我不知道爲什麼我沒有想到 - 但這就是我在這裏發佈的原因。 ;-) – Bungle 2009-10-27 13:26:14

有時候最簡單的答案是最難以想象的答案！ – 2009-10-27 16:41:44

不知道它是否可以工作，但是......你可以將第一個（左邊界）和最後一個（右邊界）TD（或TR可能）而不是表格本身作爲邊界嗎？這應該給出相同的視覺效果。

否則，我不會在包裝DIV上失去太多睡眠。

2009-10-26 17:25:39

感謝您的幫助，DA。 Andy的回答實際上在我的情況下效果最好，但我很欣賞你的意見。 – Bungle 2009-10-27 13:28:19

我不知道是否有跨瀏覽器的解決方案。 IE框模型的工作方式實際上是你想要的：一旦你聲明瞭一個元素的寬度，那就是寬度，然後它從元素的「內部」寬度中減去填充邊界和邊界，以給出你聲明的寬度。

所有其他瀏覽器的做法相反：它們將元素寬度設置爲聲明的寬度，然後添加邊距填充和邊框。

我剛剛在IE7和Firefox 3.5中測試了您的代碼，即使使用10px黑色邊框，它們的寬度也都是500px。這是我擔心的老版本的Firefox。

2009-10-26 17:26:35 tahdhaze09

回答