所以，我有一张桌子：
<table border=1>
<caption>This is a table.</caption>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
</table>
我希望它尽可能的广泛，同时每边留下20px的余量。所以我做到了这一点：
table{
border-collapse:collapse;
margin:20px;
padding:0;
width:100%;
}
但最终是父母的宽度加上左边额外的20px边距，导致出现垂直滚动条。有没有办法使它比父母的宽度少40px，而不添加其他元素来包围它？
jsfiddle：http://jsfiddle.net/pvHNM/
解决方法
使用calc()计算预期宽度：
table {
margin: auto;
width: calc(100% - 40px);
}
