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