CSS表格宽度-100%+；负边际

我偶然发现了一个我不完全确定如何解决的问题

我有一个包含许多div的页面，其中一个包含一个表，但有20px的边距。我需要这张桌子“对接”另一个div的右侧，这是我通过使用-20px的余量完成的，正如我所希望的那样。由于该div（覆盖页面的整个右侧）是流动的，因此表格的宽度为100%

虽然桌子的左边是我想要的地方，但右边现在比其他地方少了20像素

有没有一种方法可以让负边距保持在右边，而不让表从右边移动20px？我做了几件事都没有成功。我的表格CSS粘贴在下面

.pricetable {
    width:100%;
    margin-left: -20px;
    padding: 5px;
}

---

你完全可以调整你的桌子，使它在右边对齐

position: absolute;
right: 0;

在不移动表格的情况下，无法添加左边距，因为表格偏移是这样计算的：边距+填充+宽度=偏移宽度

将宽度设置为

100%

时，边距和填充将导致元素展开

• 填充（左）X，（右）y+宽度=

  超过100%

• 超过100%

  +负宽度（X+y）=

  100%

---

第一个定义在表的每一侧添加一些填充。第二个定义将表格向左移动，因为它是一个负边距。

尝试给出表格布局：固定并查看您还可以将宽度设置为小于100%并设置自动边距：

.pricetable {
    width:90%;
    margin: auto;
}

<div style="margin-right:-20px">
  <table style="width:100%">
     ...
  </table>
</div>

---

希望能有所帮助。

我的解决方案是将表格包装在一个带有负边距的div中

<div style="margin-right:-20px">
  <table style="width:100%">
     ...
  </table>
</div>

...

现在可以使用CSS

calc

：

.pricetable {
    width: calc(100% - 20px);
    margin-left: -20px;
    padding: 5px;
}

---

谢谢Rob——这解决了右手边的问题，但似乎在左手边产生了各种各样的问题。我怀疑我正在与这场失败的战斗中。然而，我确实想到了一个更简单的解决方案，那就是在其他元素中添加边距，使它们与表格内联。顺便说一句——感谢您的解释，您的解释完全有道理。感谢您指出Rob——以前没有注意到Accept功能。我不敢相信没有更好的解决方案，但至少这一个两边的边距相等。我已经放弃使用div自动调整页面的大小和位置。做一个宽度为100%的表格，然后让单元格占据页边空白的高度和宽度，这对我的孩子div来说确实很好。可能的重复项小心：减号运算符必须用空格括起来-无论是

100%-20px

还是

100%-20px

都不会计算。