表格溢出了它的容器的填充物

Question

我有一个DIV容器，其中包含padding和table。

我需要该表可以溢出填充延伸到DIV的边界。

这里有工作jsFiddle。我想到了这个规则中的负利润：

div
{
    width:500px;
    padding:20px;
}

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

但这只会导致表的左移，而不是宽度增加。

是否建议获得一张触摸横向DIV边界的桌子？

Answer 1

在这种情况下，使用calc函数会有所帮助：

table
{
    ...
    width: calc(100% + 40px);
}

这会增加表格的初始宽度和使用的负边距。

有关示例，请参阅http://jsfiddle.net/7dnatyhn/3/

修改

如果有帮助：您还可以为所有元素添加边距，但应该到达容器边框的元素除去容器的左右边距。

div {
    border: solid 1px red;
    width: 500px;
    padding: 20px 0;
}

div > * {
    margin: 0 20px;
}

div > table {
    margin: 0;
}