为什么在这里给定 width=100% 时 div 和 table 的行为会有所不同？答案

【问题标题】：Why do a div and a table behave differently when given width=100% here?为什么在这里给定 width=100% 时 div 和 table 的行为会有所不同？
【发布时间】：2011-01-26 02:29:23
【问题描述】：

这是我的代码，简化为相关部分：

<html><head><title></title>
<style type="text/css">
body { background-color: #fff; }
#titlebar{ border: solid 1px black; margin:10px; }

#bodyWrapper{ float: left; width: 100%; }

#bodyColumn{ margin-left: 230px; height:500px; }

#menuColumn{
    float: left;
    width: 230px;
    border: solid 1px black;
    margin-left: -100%;
    height:500px;
}

.bigContent{ width: 100%; margin:10px; }

.section{
    border: 1px solid black;
    padding:10px;
    overflow: auto;
}
</style></head><body>

<div id="titlebar">Title</div>
<div id="bodyWrapper"><div id="bodyColumn">

<table class="section bigContent"><tr><td>FIRST</td></table></table>
<div class="section bigContent">SECOND</div>

</div></div>
<div id="menuColumn">MENU</div>
</body></html>

我的问题：

包含“SECOND”的<div> 比包含“FIRST”的<table> 宽，尽管它们是兄弟姐妹并且通过相同的 CSS 类具有 width=100%
<div> 也比屏幕宽，导致出现滚动条

为什么会这样，我可以做些什么来解决它？

注意：我在 Firefox 3.6 和 IE 8 中都看到了同样的问题

【问题讨论】：

标签： html padding css

【解决方案1】：

这是因为padding。在 CSS 中，width 属性适用于元素的内容框，没有填充。

请参阅 http://www.w3.org/TR/CSS21/box.html ：width 属性适用于以下架构中的 Content 块：

所以外部元素的宽度是父元素宽度的 100%，加上 10px 的左内边距和 10px 的右内边距。

鉴于此元素是块元素，因此不必将其宽度指定为 100%。

所以解决方案是：

不设置宽度
在设置宽度时考虑填充（此处需要在% 中设置填充，例如 2% 的填充和 96% 的宽度 (100-2*2)

【讨论】：

这并不能解释为什么<table> 的行为不是这样。
我认为padding 属性不能直接应用于<table> 标签；所以表格本身没有填充，这不会影响它。
谢谢，这就解释了。我刚刚将我的桌子包裹在一个 div 中，并没有使用宽度，它可以工作。也很高兴知道未来。