CSS表格宽度 - 100％+减余量 [英] CSS Table width - 100% + minus margin

问题描述

我遇到了一个我不能完全确定如何解决的问题。

I've stumbled across an issue that I'm not entirely sure how to resolve.

我有一个页面包含多个div，其中一个包含一个表，但有一个20px的边距。我需要这个表来对接另一个div的右手边，这是我通过使用-20px的边缘完成 - 工作，我希望。由于这个div（覆盖整个页面的右侧）是流体，表格的宽度为100％。

I have a page with a number of divs, one of which contains a table but has a margin of 20px. I need this table to 'butt' against the right-hand side of another div, which I have accomplished by using a margin of -20px - works as I'd hoped. As this div (which covers the entire right-hand side of the page) is fluid, the table has a width of 100%.

虽然左侧表格是我想要的，右边现在是其他所有东西的20px。

Whilst the left-hand side of the table is where I want it, the right-hand side is now 20px short of everything else.

有一种方法，我可以保留负边距在右边，没有它也从右边移动表20px？我试过几件事情没有成功。

Is there a way I can keep the negative margin on the right, without it also moving the table 20px from the right? I've tried a few things without success. My table CSS is pasted below.

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

推荐答案

，以便它在右侧对齐。

You could absolutely position your table, so that it's aligned at the right.

position: absolute;
right: 0;

没有办法在不移动表格的情况下添加左边距，方法：margin + padding + width = offset width。

There's no way to add a left margin without moving the table, because the table offset is calculated in this way: margin + padding + width = offset width.

当将宽度设置为 100％边距和填充使元素扩展。

When you set the width to be 100%, the margin and padding cause the element to expand.

• 填充（左）X， = 超过100％


• 超过100％ （X + y） = 100％。



• Padding (left) X, (right) y + width = over 100%
• over 100% + negative width (X+y) = 100%.

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

The first definition adds some padding at each side of the table. The second definition shifts the table to the left, because it's a negative margin.

这篇关于CSS表格宽度 - 100％+减余量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！