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 。

Answer 3

您可以在table-element上设置填充。 thead，tbody和tfoot以及内部的行将填满表中的空间。

table
{
    border-collapse:collapse;
    padding:20px;
    margin:0;
    width:100%;
}

Answer 4

我发现最好的答案很有用，但它在旧版浏览器中不起作用。 最适合我的是桌子外面设置边距的DIV。 然后，父级的100％宽度将受此div的影响，而不是父元素。

<div style="margin">
  <table style="width:100%">
  </table>
</div>