关于table的width:100%和margin导致溢出的问题通常是因为没有正确理解table默认的box-sizing属性造成的，下面是完整攻略。
table 是一个特殊的 HTML 标签，它默认的 box-sizing 属性是 border-box，而非一般的 content-box，这意味着 table 的 width 和 height 包括 border 和 padding。
因此，我们在设置 table 元素的宽度时可以使用 width: 100% 来实现，这样 table 的宽度会自适应其容器的大小。
当我们给 table 元素添加 margin 时，若其宽度超过了容器的宽度，则会导致溢出，我们可以通过以下两个示例来说明。
HTML 代码：
<div class="container">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
CSS 代码：
.container {
width: 100%;
margin: 0 20px;
}
table {
width: 100%;
margin: 0 20px;
}
在上述代码中，我们将容器的宽度设置为 100%，并给 container 和 table 添加了相同的 margin 值。这时，若容器的宽度为 1000px，每个 td 的宽度为 300px，那么 table 的宽度就为 900px，在添加了左右 margin 值后就会变成 940px，导致溢出。解决方法如下。
table {
width: calc(100% - 40px);
margin-left: 20px;
margin-right: 20px;
}
我们使用 calc 函数来计算 table 的宽度，应该减去左右 margin 值的宽度。
HTML 代码：
<div class="container">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
CSS 代码：
.container {
width: 100%;
margin: 0 20px;
border: 10px solid #000;
}
table {
width: 100%;
margin: 0 20px;
}
在上述代码中，我们在容器上添加了 10px 的 border，这时，若容器的宽度为 1000px，每个 td 的宽度为 300px，那么 table 的宽度就为 900px，在添加了左右 margin 值后就会变成 940px，再加上 20px 的 border，导致溢出。解决方法如下。
table {
width: calc(100% - 60px);
margin-left: 20px;
margin-right: 20px;
}
我们使用 calc 函数来计算 table 的宽度，应该减去左右 margin 值和容器的 border 值的宽度。
本文链接：http://task.lmcjl.com/news/15746.html