我在 div 中有一个表格。我希望表格占据 div 标签的整个宽度。
在 CSS 中，我将表格的 width 设置为 100%。不幸的是，当 div 上有一些 margin 时，表格最终会比它所在的 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 上都有左边距，这会创建一个很好的“嵌套”效果）。
【问题讨论】：
将以下 CSS 添加到您的 <table>:
table-layout: fixed;
width: 100%;
【讨论】：
以下内容在 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 没有指定宽度，则表格的宽度与它无关。您能否发布一个简化版本的标记，显示您的 DOM 树的样子？
从另一个角度来看，如果您的父 div 确实设置了宽度并且边距仍然影响您的表格，那么您可能处于怪癖模式。您已经指定了DOCTYPE，但请注意DOCTYPE 元素必须是文件中的第一行。处理 IE6 时需要注意的其他事项，默认情况下，如果您的内容比父元素宽，则父元素将被拉伸以适应，您可以通过将 overflow: hidden 添加到父元素的 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>
【讨论】：
我在这里找到了问题的核心。它与border-collapse 有关。我已经有一段时间了同样的问题。由于表格的边框通常很薄，因此问题对大多数人来说并不明显。如果你像 Nate 那样在 div 中放置一个宽度设置为 100% 的常规表格，那就没问题了。
但是，如果你在表格上指定border-collapse:collapse，表格就会跳出div。这对大多数人来说并不明显，因为它可能只突破一个像素，或者取决于它所在的上下文和用户代理，可能根本不会。
为了更清楚地了解发生了什么，请尝试以下操作：将 Nate 的示例放在 html 文件中的 David Heggie 的示例旁边。
看起来两者都可以正常工作。但是现在，将 Nate 的内联 TD 样式更改为 border: 40px solid blue。将 David 的表格 td 样式更改为 border: 40px solid #999;。在这一点上，大卫的桌子在每边突破了 50% 的边界。奈特还在工作。
将border-collapse:collapse 样式放在 Nate 的桌子上，他现在也休息一下。
是border-collapse 造成的！
【讨论】：
如果您自动生成可能有边距的代码，添加一个简单的、无样式的 <div> 元素来包裹您的表格可能会奏效。
【讨论】：
我一直用<table width="100%">
【讨论】：
#my-parent-div table{margin: 100%;} 之类的 CSS
这是 CSS 处理 width 属性的方式的一个大问题，也是微软最初以不同方式实现盒子模型的原因。微软输了，现在它是元素的宽度或边距/填充/边框。
box-sizing propertybox-sizing propertyCSS3 中的情况可能会变得更好
【讨论】：
也许这篇关于Internet Explorer and the CSS box model 的详尽文章会有所帮助？
【讨论】：
试试这个：
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
通过将 div 的 padding 设置为零，您将删除 div 的边框和它的内容之间的空间。通过将表格的宽度设置为 100% 并将其边距设置为零，您将删除表格边框与其容器之间的空间。
【讨论】：
顺便说一句，你有充分的理由不使用严格的文档类型吗？严格应该始终是默认值。过渡仅适用于遗留代码。
【讨论】：
以下代码适用于 IE6/8、Chrome、Firefox、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？浮动也会带来麻烦。
附：我设置了红色和蓝色边框，以查看区域扩展到的位置，以便进行更直观的检查。
【讨论】：
溢出：自动；如果您看到奇怪的东西，最外面的 div 可能会有所帮助 - 例如最外面的 div 比您想要的要小，或者没有占据其中 div 的整个大小。
【讨论】：