HTML表格全宽,带边距

Question

我有一张桌子:

<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/

Answer 1

使用calc()计算预期宽度:

table {
    margin: auto;
    width: calc(100% - 40px);
}

http://jsfiddle.net/EXS76/1/

Answer 2

根据CSS规则,width属性设置元素内容的宽度,因此您需要将100%的可用宽度分配给表本身,并为边距分配一些额外的空间.这不可避免地导致水平滚动.

作为解决方法,您可以将表包装在div元素中并margin在其上进行设置.