580671 - inner table element does not respect left and right margin styles

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Reece H. Dunn]

User-Agent:       Mozilla/5.0 (Windows; Windows NT 5.1; Locale; rv:2.0b2pre) Gecko/20100711 ( .NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; Windows NT 5.1; Locale; rv:2.0b2pre) Gecko/20100711 ( .NET CLR 3.5.30729)

If an inner table element specifies the margin-right style, it is not offset by that margin with respect to the td element that contains it.

If an inner table element specifies the margin-left style, it is offset by that margin with respect to the td element that contains it, but the rightmost edge of the table is also offset, so it appears outside the containing td element.

As such the inner table is not respecting the box model w.r.t. the td element that contains it.

Reproducible: Always

Comment 1

[Reece H. Dunn]

Attachment: testcase specifying left and/or right margins on an inner table

Comment 2

[philippe (part-time)]

Everything works correctly :-)

Please re-read CSS2.1:10.3
http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins
and in particular 10.3.3
http://www.w3.org/TR/CSS21/visudet.html#blockwidth

In your testcase, row 2 and row 4 are over constrained and overflow the parent (td)
row 3: the margin-right is ignored

Comment 3

[Reece H. Dunn]

So is there a way to do what I want in CSS? If not, I would argue that this is a defect in the CSS specification.

If you have a parent element that has a width that is larger than the content of the child element, and the child element specifies left and right margins and a width of 100%, the margins should be subtracted from the parent elements width (along with the padding and border). The resulting calculated width is then the 100%.

Also, the above reading is in line with visudet.html#blockwidth -- all it says is that if the values are over constrained, at least one of them must be ignored. But the width is 100%, which is intended to say "fill the maximum space once left/right margin, padding and border have been determined".

Is margin-right ignored for the same reasoning, or is there another part of the spec?

The only other way I could see of doing this is through either a calc() expression, or some javascript, both of which are not as elegant as specifying "width: 100%".

Comment 4

[Boris Zbarsky [:bzbarsky]]

> So is there a way to do what I want in CSS?

Not at the moment.

> If not, I would argue that this is a defect in the CSS specification.

It's a missing feature, at least.  This is why calc() is being worked on.

> The resulting calculated width is then the 100%.

That's not how CSS works, no.  Percentage widths are always percentages of the containing block size independent of other widths specified on the element.  This avoids issues like having to decide the exact order percentages are resolved in, but does mean that what you're trying to do 

> But the width is 100%, which is intended to say "fill the maximum
> space once left/right margin, padding and border have been determined".

That's not what 100% means in CSS.  100% just means "the width of the containing block".

> both of which are not as elegant as specifying "width: 100%".

Well... The way percentages are resolved is just a spec design decision (which was made going on 15 years ago; CSS1 had this behavior when it became a REC in December 1996).  While that design decision makes this particular case less elegant, it makes other cases more elegant.  That's the nature of design decisions.

The right solution to this problem in CSS is to use calc(), once enough brosers support it.

Comment 5

[Reece H. Dunn]

(In reply to comment #4)
> > The resulting calculated width is then the 100%.
> 
> That's not how CSS works, no.  Percentage widths are always percentages of the
> containing block size independent of other widths specified on the element. 
> This avoids issues like having to decide the exact order percentages are
> resolved in, but does mean that what you're trying to do 

Ah, ok. That makes sense.

> The right solution to this problem in CSS is to use calc(), once enough brosers
> support it.

That looks reasonable. Thanks for the info.

Comment 6

[philippe (part-time)]

calc() is the way, for the future.

For the current crop of browsers, a less-than-elegant solution, if you want/need to work with nested tables: wrap your inner table in a div, set the margins on the div and then set the width on the table

pseudo code:

<td>
    <div style style="margin-left:1em; margin-right:1em">
    <table style="width:100%">
...
    </table>
    <div>
</td>