212661 - anonymous table inside inline ends up inline rather than block

Status: RESOLVED DUPLICATE of bug 135994

(Core :: Layout: Tables, defect)

Description

[石庭豐 (Seak, Teng-Fong)]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5b) Gecko/20030712
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5b) Gecko/20030712

This bug is about <table> elements used with {display:inline} style and
displayed incorrectly.  The nearest bug that I've found is bug 135994, but since
that bug's main point is {vertical-align:middle} whereas this bug is only
{display:inline}, therefore I open this new bug.  If you think it's indeed a
dup, feel free to mark it.  But first, please take a look at the test case.
It's hard to explain the problem, so try the test case in IE6 and Mozilla and
you'll see the problem.

Reproducible: Always

Steps to Reproduce:




The problem doesn't seem to be related to border width either, so it doesn't
seem to be a dup of bug 135994.  Anyway, try to play with different value for
border and you can see more problems!!

Comment 1

[石庭豐 (Seak, Teng-Fong)]

Attachment: Lots of tables displayed as inline

Tables are line-up so as to have more than one table on one line.

Comment 2

[Boris Zbarsky [:bzbarsky]]

The testcase rendering looks correct to me.  IE does not support display:inline
on <table> elements, so comparing to IE is not useful.

Marking invalid, but if I've missed something please reopen with a clear
description of the problem.  "It does not look like IE" is not a clear
description, especially as I have no IE to test with.  Screenshots are nice as
illustrations if needed.

Comment 3

[石庭豐 (Seak, Teng-Fong)]

Adding screen-shots to justify reopening bug

Comment 4

[石庭豐 (Seak, Teng-Fong)]

Attachment: As seen under Mozilla (20030712)

Comment 5

[石庭豐 (Seak, Teng-Fong)]

Attachment: As seen under IE6 (SP1)

This time IE6 is correct, but not Mozilla.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Yes, I saw that rendering.  Again, Mozilla's rendering is correct.  IE is
rendering the tables as if they had display:inline-table, not display:inline. 
Mozilla is correctly rendering them as display:inline (and we do not support
display:inline-table yet, in case you decide to try it; neither does IE).

Comment 7

[Chris Sharman]

See also 118553, which acknowledges issues with inline tables.
The only vaguely portable way I found to achieve the effect I wanted may be seen
at www.prestonbridge.pwp.blueyonder.co.uk/calendar.htm
It's necessary to specify width & height (in ems to behave with different text
sizes) and block & float the tables. Other solutions may work for some browsers,
but are disastrous for others (including mozilla).

Comment 8

[Daniel Potter]

Someone sent a complaint to bug 135994 asking for support.  While I think that
this is indeed a bug, I also think it's a duplicate of 135994.  (I already
closed out my version of this bug, bug 195270, as a duplicate.)

Anyway, my understanding of the CSS spec is that tables marked a non-table
display type cause an "anonymous" table to be generated as a child block. 
Basically, you start with:

<table style="display:inline"> ... </table>

And then create an anonymous table block inside it, set to "display: table". 
This anonymous block "handles" the actual table rendering.  The original HTML is
effectively the same thing as saying:

<div style="display:inline"><table style="display:table"> ... </table></div>

Where the <div> takes the place of the original <table> and the <table> is the
anonymous block that's created.

This means the correct behavior for a table set to "display: inline" is
effectively the same as a table set to "display: inline-table", although the
internal CSS structure is different.

Regardless, the current Mozilla behavior for a "display: inline" table is really
unacceptable: it creates strange results for something that is valid CSS/HTML. 
(Or is it valid?  If assumed to be invalid CSS/HTML (although potentially valid
for XML-styled documents), then the CSS2 spec indicates that Mozilla should
*ignore* any "display" styles set on any table element, ie <table>, <tr>, <td>,
<tbody>, etc..  This currently does not happen, and probably should, until
"inline-table" is ready.)

Comment 9

[Boris Zbarsky [:bzbarsky]]

> Anyway, my understanding of the CSS spec

Yes, that is correct.

> This means the correct behavior for a table set to "display: inline" is
> effectively the same as a table set to "display: inline-table", although the
> internal CSS structure is different.

Not quite.  Any other styling applied to the table (the background, in this
case) is applied to the inline box it generates, not the anonymous table box
that's inserted.

> it creates strange results for something that is valid CSS/HTML. 

Strange in what way?

And yes, it's valid.  The thing about tables in CSS2 is a "may", not a "should"
and even that was added only as a cop-out for IE's total lack of support for
usefully changing the display of <table>.  It may well be removed in CSS2.1.

Comment 10

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

> This means the correct behavior for a table set to "display: inline" is
> effectively the same as a table set to "display: inline-table", although the
> internal CSS structure is different.

Not true, for two reasons:
 * the styles on the table apply to the inline, not the anonymous table object
 * the anonymous object is a 'table', not an 'inline-table', so it causes line
breaks.

Comment 11

[Daniel Potter]

The reason I say "messed up results" is based on my page here:

http://users.wpi.edu/~dpotter/flood/index-messed-up.shtml

Which ran into this problem.  The current example only shows part of the problem
- the border calculations wind up with the borders all being too small and
causes those black rectangles on the bottom.  In my case, the height/width
calculations appear to be almost correct for the text, but it's wrong for the
image, causing the individual images to appear incorrectly (and on top of each
other).  This doesn't happen in IE.

Anyway, after re-reading the spec (and realizing that tables *aren't* a replaced
element, like I thought they were), it would appear that setting "display:
inline;" on a table *should* cause the table to behave like "display: table;". 
However - this doesn't happen.  (Also, weird results would probably happen if
there were a "display: table" as a parent of a <table style="display: inline;">.)

The end result is that Mozilla doesn't quite handle having "display: inline;"
set as a style on a <table> element right.  The "Right Thing" to do is probably
to treat "display: inline;" as "display: inline-table;" while in quirks mode (is
that possible?) and treat it "properly" while in standard-compliant mode. 
Assuming that "inline-table" is ever implemented *grin*.

Comment 12

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

ok, reopening.  We probably need to do block-within-inline splitting for tables,
including anonymous tables.

Comment 13

[Eli Friedman]

The current bug, "anonymous table inside inline ends up inline rather than
block", is the same as bug 135994.

Comment 14

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

*** This bug has been marked as a duplicate of 135994 ***