CSS表格宽度 - 100％+减去边距

Question

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

我有一个包含多个div的页面，其中一个包含一个表，但边距为20px。我需要这张桌子“对接”另一个div的右侧，我已经通过使用-20px的余量完成了 - 按照我的希望工作。由于这个div（覆盖页面的整个右侧）是流动的，因此桌子的宽度为100％。

虽然桌子的左侧是我想要的位置，但右侧现在比其他任何一侧都短20px。

有没有办法可以保持右边的负边距，而不会将表格从右边移动20px？我尝试了一些没有成功的事情。我的表格CSS粘贴在下面。

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

Answer 1

我的解决办法是将表格包裹在带有负边距的div中。

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

Answer 2

您还可以将宽度设置为小于100％并设置margin auto：

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

希望它有所帮助。

Answer 3

现在可以使用CSS calc：

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

Answer 4

你绝对可以放置你的桌子，使它在右边对齐。

position: absolute;
right: 0;

没有移动表格就无法添加左边距，因为表格偏移量是以这种方式计算的：margin + padding + width = offset width。

当您将宽度设置为100%时，边距和填充会导致元素展开。

• 填充（左）X，（右）y + width = over 100%
• over 100% + 负宽度（X + y） = 100%。

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

Answer 5

尝试提供 table-layout：fixed 并查看