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%并设置自动边距:

.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%，边距和填充会导致元素展开。

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