我有一個div內的表。我希望表格佔據div標籤的整個寬度。如何製作與包含div標籤相同寬度的HTML表格？
在CSS中，我將表格的寬度設置爲100％。不幸的是，當div有一定的餘量時，表格最終比它所在的div寬。
我需要支持IE6和IE7（因爲這是一個內部應用程序），儘管我很明顯喜歡完全如果可能，跨瀏覽器解決方案！
我用下面的DOCTYPE ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
編輯：可惜我不能硬編碼，因爲我動態生成HTML，它包括嵌套的寬度div在每個div內遞歸（每個div都有左邊距，這會產生一個很好的嵌套效果）。
以下對我來說適用於Firefox和IE7 ...一個指導原則，但是：如果您設置元素的寬度，請不要在同一元素上設置邊距或填充。如果你是混合單位 - 比方說，混合百分比和像素，那麼這就成立了，特別是，特別是。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="width: 500px; background-color:#F33;">
This is the outer div
<div style="background-color: #FAA; padding: 10px; margin:10px;">
This is the inner div
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
</tr>
</table>
</div>
</div>
</body>
</html>
查看here的例子。
如果您自動生成可能有邊距的代碼，那麼添加一個簡單的，無風格的包裝表格的<div>元素可能會訣竅。
這是CSS處理寬度屬性的方式以及微軟首先以不同方式實現盒子模型的原因的一個大問題。微軟失去了，現在它是一個元素的寬度或邊距/填充/邊框。
情況可能會改變在CSS3更好地與box-sizing property
我一直使用<table width="100%">
也許這廣泛的文章約Internet Explorer and the CSS box model會有幫助嗎？
試試這個：
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
由div的填充設置爲零，你將刪除div的邊框和它的內容之間的空間。通過將表格的寬度設置爲100％並將邊距設置爲零，您將刪除表格邊框和容器之間的空間。
基於百分比的寬度與具有指定寬度的第一個父元素相關。如果你的div沒有指定寬度，那麼表的寬度與它無關。你能發佈一個簡化版的標記來顯示你的DOM樹是什麼樣的嗎？
從另一個角度來看，如果您的父級div設置了寬度並且邊距仍然影響您的表格，那麼您可能處於怪異模式。你已經指定了你的DOCTYPE，但是請注意DOCTYPE元素必須是文件中的第一行。在處理IE6時需要注意的是，默認情況下，如果你的內容比你父母的內容寬，父母會被拉伸以適應，你可以通過添加overflow來阻止：隱藏到父母元素的CSS中，但是在這個過程中，你可能會掩蓋某些子元素的內容。
不太確定問題在這裏 - 這在IE6/7和FF3中正常工作。設置.container DIV元素的寬度設置表格的寬度。向.container div添加邊距不會影響表格。也許在你的標記/ CSS中還有其他影響佈局的東西？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Boxes and Tables</title>
<style type="text/css">
div.container {
background-color: yellow;
border: 1px solid #000;
width: 500px;
margin: 5px auto;
}
table.contained {
width: 100%;
border-collapse: collapse;
}
table td {
border: 2px solid #999;
}
</style>
</head>
<body>
<div class="container">
<table class="contained">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
</thead>
<tbody>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td></tr>
</tbody>
</table>
</div>
</body>
</html>
順便說一下，是否有充分的理由不使用嚴格的文檔類型？嚴格應該始終是默認的。過渡僅適用於舊版代碼。
我想出了問題的核心在這裏。它與邊界崩潰有關。我現在有一段時間同樣的問題。由於表格通常具有較薄的邊界，所以對大多數人來說問題並不明顯。如果你把一個寬度設置爲100％的常規表格放在div裏，就像Nate一樣，你會沒事的。
但是，如果您在表上指定了border-collapse：collapse，則該表將打破div。這對於大多數人來說並不明顯，因爲它可能只會突破一個像素，或者取決於它所在的上下文以及用戶代理，可能根本就沒有。
爲了更清楚地說明發生了什麼，請嘗試以下操作：將Nate的示例放在David Heggie的示例旁邊的html文件中。
它看起來像兩個工作正常。但現在，將Nate的內聯TD樣式更改爲「border：40px solid blue」。將David的table td樣式更改爲「border：40px solid＃999;」。在這一點上，大衛的桌子突破了每邊50％的邊界。 Nate仍然有效。 在Nate的桌子上放置邊框摺疊：摺疊樣式，現在他也休息了。
這是導致它的邊界崩潰！
下面的代碼適用於IE6/8，Chrome瀏覽器，火狐，Safari：
<style type="text/css">
div.container
{
width: 500px;
padding: 10px;
margin: 10px;
border: 1px solid red;
}
table.contained
{
width: 100%;
border: 1px solid blue;
}
</style>
<div class="container">
<table class="contained">
<tr>
<td>Hello</td><td>World</td>
</tr>
</table>
</div>
嘗試複製和粘貼，並建立它（只是樣式的一部分移到頭部或單獨的.css文件），也許你使用內聯CSS（使用樣式標記）的方式與問題有關，或者它是圍繞div表塊的其他CSS？浮動也可以帶來麻煩。
P.S.我設置了紅色和藍色邊框，以查看區域擴展到哪裏以進行更直觀的檢查。
overflow：auto;如果你看到奇怪的東西，最外面的div可能會有所幫助 - 比如最外面的div小於你想要的或者不會佔據其內部div的全部大小。
下面的CSS添加到您的<table>：
table-layout: fixed;
width: 100%;
說沒有設置寬度和利潤率在相同的元素後，你這樣做正是您例如股利。只是好奇爲什麼？ – Kane 2012-02-06 08:55:30
你是對的。我不記得了！也許我想遵循我認爲OP使用的標記？我會編輯。 – Nate 2012-02-06 15:03:33