我在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>
请参阅此处的示例。
基于百分比的宽度相对于具有指定宽度的第一个父元素。 如果您的div没有指定宽度，则表的宽度与它无关。 您可以发布标记的简化版本来显示DOM树的样子吗？
从另一个角度来看，如果您的父div确实设置了宽度并且边距仍在影响您的表格，那么您可能处于怪癖模式。 您已经指定了DOCTYPE ，但是要知道DOCTYPE元素必须是文件的第一行。 默认情况下，使用IE6时要注意其他事项，如果您的内容比父项宽，则父项将被拉伸以容纳，您可以通过添加overflow: hidden来停止它overflow: hidden为父项元素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。 这对于大多数人来说并不明显，因为它可能只会出现一个像素，或者取决于它所处的上下文和用户代理，也许根本不会出现。
为了使发生的事情更清楚，请尝试以下操作：在HTML文件中，将Nate的示例放在David Heggie的示例旁边。
看起来两者都可以正常工作。 但是现在，将Nate的嵌入式TD样式更改为border: 40px solid blue 。 将David的表格td样式更改为border: 40px solid #999; 。 此时，David的桌子超出了div两侧边界50％的范围。 内特仍在工作。 在Nate的桌子上放一个border-collapse:collapse样式，他现在也要休息一下。
造成它的是border-collapse ！
如果您是自动生成可能带有边距的代码，则添加一个简单的，没有样式的<div>元素来包装表格就可以解决问题。
我一直使用<table width="100%">
溢出：自动； 如果您看到奇怪的东西，则最外面的div上的内容可能会有所帮助-例如最外面的div小于您想要的div或不占用里面的div的整个大小。
以下代码适用于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？ 漂浮也会带来麻烦。
PS我设置了红色和蓝色边框，以查看区域扩展到的位置，以便进行更直观的检查。
那是CSS对待width属性的方式存在的最大问题，也是Microsoft首先以不同的方式实现box模型的原因。 微软输了，现在元素的宽度或边距/边距/边框。
具有box-sizing属性的 CSS3的情况可能会变得更好
也许这篇有关Internet Explorer和CSS框模型的文章会有所帮助？
尝试这个：
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
通过将div的填充设置为零，您将删除div的边框及其内容之间的空格。 通过将表格的宽度设置为100％并将其边距设置为零，您将删除表格边框与其容器之间的空间。
顺便说一句，您是否有充分的理由不使用严格的doctype？ 严格应该始终是默认设置。 过渡式仅适用于遗留代码。