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

Posted 2023-03-06

【中文标题】CSS 表格宽度 - 100% + 减去边距

【英文标题】：CSS Table width - 100% + minus margin

【发布时间】：2011-11-29 08:37:35

【问题描述】：

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

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

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

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

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

【问题讨论】：

Div width 100% minus fixed amount of pixels 的可能重复项

【参考方案1】：

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

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

【讨论】：

已经放弃使用 div 自动调整页面元素的大小和位置。做一个宽度为 100% 的表格然后让单元格占据边距的高度和宽度实际上会对我的孩子 div 做得很好。

【参考方案2】：

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

.pricetable 
    width:90%;
    margin: auto;

希望对你有帮助。

【讨论】：

不敢相信没有更好的解决方案，但至少这个两边的边距相等。

【参考方案3】：

现在可以使用 CSS calc:

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

【讨论】：

注意：减号运算符必须用空格括起来 - 100%- 20px 和 100% -20px 都不会计算。

【参考方案4】：

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

position: absolute;
right: 0;

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

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

填充（左）X，（右）y + 宽度 = over 100% over 100% + 负宽度 (X+y) = 100%.

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

【讨论】：

谢谢 Rob - 整理了右侧，但似乎在左侧产生了各种问题。我怀疑我正在为此打一场失败的战斗。然而，我确实想到一个更简单的解决方案是在其他元素中添加边距以使它们与表格内联。

顺便说一句 - 也感谢您的解释，您解释的方式完全有道理。

感谢 Rob 指出这一点 - 之前没有注意到 Accept 功能。

【参考方案5】：

尝试给 table-layout:fixed 看看