279374 - Table rendering issues when using CSS

Status: RESOLVED WORKSFORME

(Core :: Layout: Tables, defect)

Description

[Robert Wruck]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041217
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041217

There are several issues with table rendering when the table is formatted with CSS.

- If the text-align is center, a table is not centered if it's display:block.
DIV elements which are display:block are centered.
- By default, a display:block table occupies 100% width, but the table cells are
shrunk to fit the content (and aligned left).
- If a table is display:inline and it has no border, table cells are not
distributed across the whole width. If the table has a border, the cells are
distributed evenly.
- The table border on display:inline tables is drawn through the cells instead
of around them.

Verified: Mozilla 1.7.5/WinXP, Mozilla 1.7.3/Linux, Firefox 1.0/WinXP


Reproducible: Always

Steps to Reproduce:
Open the attached page
Actual Results:  
See table1.gif

Expected Results:  
See table2.gif

Comment 1

[Robert Wruck]

Attachment: HTML Source

Comment 2

[Robert Wruck]

Attachment: Page as rendered by Gecko

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to comment #0)
> - If the text-align is center, a table is not centered if it's display:block.
> DIV elements which are display:block are centered.

Invalid.  Note (as for the later ones) that making a table 'display: block' or
'display: inline' rather than 'display: table' means it's no longer a table.

> - By default, a display:block table occupies 100% width, but the table cells are
> shrunk to fit the content (and aligned left).

Invalid.

> - If a table is display:inline and it has no border, table cells are not
> distributed across the whole width. If the table has a border, the cells are
> distributed evenly.

Not sure what you mean.

> - The table border on display:inline tables is drawn through the cells instead
> of around them.

Invalid.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: testcase for the only valid issue here

Comment 5

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Comment 6

[Bernd]

Davids Testcase is a missing reflow, at least if the outer table is reduced in
size by reducing the window size the cells gain some width

Comment 7

[Robert Wruck]

(In reply to comment #3)
> Invalid.  Note (as for the later ones) that making a table 'display: block' or
> 'display: inline' rather than 'display: table' means it's no longer a table.

If it's not a table - what else? CSS2 9.2.5 says you can make elements render as
tables, but not that you can make tables render as something else.

My understanding of 9.2.5 in connection with 17.2 and 17.4 is that
display:block, when applied to a table, should be equivalent to display:table
and display:inline should be equivalent to display:inline-table. In (X)HTML the
'table' property is implied by the element. Changing the table element into a
text box and letting the cells overflow is not specified (and it makes no sense
to me).

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

If it's not 'display: table' or 'display: inline-table', then it's not a table,
and the rules in
http://www.w3.org/TR/2004/CR-CSS21-20040225/tables.html#anonymous-boxes kick in
and create one, but one which you have no ability to style.

Comment 9

[Robert Wruck]

(In reply to comment #8)
> If it's not 'display: table' or 'display: inline-table', then it's not a table,

That's the current behaviour, but I don't think that's what the spec intends (on
the other hand, I'm not a w3c member...).
17.2.1 says "Document languages other than HTML [...]". Why create anonymous,
not stylable elements when all required tags are actually there? You shouldn't
be able to redefine the semantics of a tag in HTML, so a table should always be
rendered as a table (which would not be the case in other XML applications).
Unfortunately, mozilla doesn't implement inline-table (#18217), but even if it
did, I wouldn't expect a table with display:inline to be rendered as it is now.
Why do the table cells overflow the generated object (17.2.1 says "This object
will span all consecutive siblings ...") and if there's no ability to style it,
why is the border rendered anyway?

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

You're getting the objects mixed up.

Comment 11

[Robert Wruck]

(In reply to comment #10)
> You're getting the objects mixed up.
Hmm right. But only in the last sentence...
So I really wanted to ask: Why is the height of the (formerly-table) inline box
not adjusted to fit the size of the contained anonymous table?
After another test, this does seem to be a generic issue, since an IMG inside a
SPAN exposes the same behaviour (span border drawn across image if image is
taller than a line of text).
IMHO this is a violation of 10.8 (line-height calculation), since the replaced
element box (anonymous table/img) has the uppermost top?

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

10.8 describes line box heights; 10.6.1 describes inline box heights.

Comment 13

[Bernd]

this is wfm now, probably fixed by the reflow branch