CSS 表格宽度 - 100% + 减去边距答案

【问题标题】：CSS Table width - 100% + minus marginCSS 表格宽度 - 100% + 减去边距
【发布时间】：2011-11-29 08:37:35
【问题描述】：

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

我有一个包含多个 div 的页面，其中一个包含一个表格，但边距为 20 像素。我需要这张表“对接”另一个 div 的右侧，我通过使用 -20px 的边距来实现这一点 - 正如我所希望的那样工作。由于这个 div（覆盖整个页面右侧）是流动的，因此表格的宽度为 100%。

虽然表格的左侧是我想要的位置，但右侧现在比其他所有位置都短 20 像素。

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

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

【问题讨论】：

标签： css

【解决方案1】：

我的解决方案是用负边距将表格包裹在 div 中。

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

【讨论】：

【解决方案2】：

您还可以将宽度设置为小于 100% 并设置边距自动：

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

希望对你有帮助。

【讨论】：

【解决方案3】：

现在可以使用 CSS calc:

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

【讨论】：

【解决方案4】：

您可以绝对定位您的表格，使其向右对齐。

position: absolute;
right: 0;

不移动表格是无法添加左边距的，因为表格偏移量是这样计算的：margin + padding + width = offset width。

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

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

【讨论】：

谢谢 Rob - 整理了右侧，但似乎在左侧产生了各种问题。我怀疑我正在为此打一场失败的战斗。然而，我确实想到一个更简单的解决方案是在其他元素中添加边距以使它们与表格内联。
顺便说一句 - 也感谢您的解释，您解释的方式完全有道理。
感谢 Rob 指出这一点 - 之前没有注意到 Accept 功能。

【解决方案5】：

尝试给 table-layout:fixed 看看

【讨论】：