Beginning on October 25th, 2016, Persona will no longer be an option for authentication on BMO. For more details see Persona Deprecated.
Last Comment Bug 87277 - Tables don't collapse outer vertical margins [MARGIN-C]
: Tables don't collapse outer vertical margins [MARGIN-C]
[Hixie-P2] Forward-compatible workaro...
: css2, dev-doc-complete, testcase
Product: Core
Classification: Components
Component: Layout: Tables (show other bugs)
: Trunk
: All All
: P3 normal with 21 votes (vote)
: mozilla10
Assigned To: :Ehsan Akhgari (Away Oct 25 - Nov 9)
: 109517 133688 258241 327277 372303 (view as bug list)
Depends on: 50959 659828 691591
Blocks: css2.1-tests 625703
  Show dependency treegraph
Reported: 2001-06-22 04:06 PDT by Hixie (not reading bugmail)
Modified: 2016-07-12 10:02 PDT (History)
38 users (show)
roc: wanted1.9.2-
ehsan: in‑testsuite+
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

simple HTML testcase (383 bytes, text/html)
2005-10-25 19:25 PDT, j.j.
no flags Details
simple HTML testcase (the right one) (922 bytes, text/html)
2005-10-25 19:31 PDT, j.j.
no flags Details

Description Hixie (not reading bugmail) 2001-06-22 04:06:16 PDT
Tables don't collapse vertical margins. It works fine if you take the test and
replace "table" with "block" in the style block.
Comment 1 Hixie (not reading bugmail) 2001-06-22 04:08:27 PDT
(The block case is at
Comment 2 Bernd 2001-08-18 10:57:44 PDT
The problem is in
the block top child is a tableouterframe, which does not carry the margin. In
order to get this for tables right: it should be checked first whether there is
caption frame, and use its top margin otherwise use the innertableframe margin
Comment 3 Hixie (not reading bugmail) 2001-08-25 12:48:57 PDT
(// XXX except if the caption is not at the top of the table)
Comment 4 Bernd 2001-11-12 11:46:55 PST
*** Bug 109517 has been marked as a duplicate of this bug. ***
Comment 5 Arnoud Berendsen 2002-04-29 16:50:02 PDT
*** Bug 133688 has been marked as a duplicate of this bug. ***
Comment 6 Greg K. 2002-07-14 10:50:18 PDT
Reconfirmed using FizzillaCFM/2002071208. Setting All/All.
Comment 7 dolphinling 2004-09-15 23:45:40 PDT
*** Bug 258241 has been marked as a duplicate of this bug. ***
Comment 8 j.j. 2005-10-25 19:22:06 PDT
Sorry for the spam, but isn't it time to have a look on this?
It validates CSS and breaks compliance with IE and other browsers.
Comment 9 j.j. 2005-10-25 19:25:52 PDT
Created attachment 200827 [details]
simple HTML testcase

Simplified HTML test without display:table to see what IE does.
Comment 10 j.j. 2005-10-25 19:31:35 PDT
Created attachment 200829 [details]
simple HTML testcase (the right one)

Sorry, this one is it...
Comment 11 Martijn Wargers [:mwargers] (not working for Mozilla) 2006-02-15 06:04:51 PST
*** Bug 327277 has been marked as a duplicate of this bug. ***
Comment 12 Christian Lehmann 2006-04-10 08:37:57 PDT
I would like to underline comment #8.
I verified the bug for Firefox on Windows 98.
Comment 13 Gérard Talbot 2006-04-18 11:19:49 PDT
Another testcase:

Expected results: there should be a gap of exactly 100px between each table

Actual results: there is a 150px gap between each table.

Opera 9.0 and IE 7 beta 2 get the expected results.

I'm voting for this bug!
Comment 14 Ornette 2007-02-22 11:07:53 PST
Can't there be some action on this simple issue? Clearly, wrapping a table in a div works around this problem, surely hardcoding this into Mozilla is an easy task?
Comment 15 Scott R. Godin 2007-02-27 03:31:45 PST
agreed. Looking at the original report date and seeing it was from TWO THOUSAND AND ONE .. SIX [admirable restraint] YEARS AGO...

this needs to be resolved. 
Comment 16 Gary Turner 2007-05-10 21:25:05 PDT
Doesn't display table establish a new formatting context, like a float or absolute positioned element?  Thus, the vertical should _not_ collapse, query?

Is this really a bug, or an aggravatingly correct rendering?

Comment 17 Mike Gratton 2007-05-10 22:16:10 PDT
You're right about display: table establishing a new formatting context, but in CSS 2.1, neither §8.3.1 (Collapsing margins) or §9.4.1 (Block formatting contexts), mention anything about margins not collapsing, other than to say that they never do for floats.

So unless I messed something, I still think it is a bug.
Comment 18 Gary Turner 2007-05-10 23:00:09 PDT
You are, of course, quite right.  Thanks for reminding me to RTFM before mouthing off. :)

So floats, absolutes, and inline-blocks do not collapse even with their in flow children. While elements in block formatting contexts due to having overflow set to other than visible do not collapse with their in flow children, but do collapse externally.

It would seem that elements with display table or table-cell ought to at least not collapse with their in flow children.  That would be at least what I perceive as a correct behavior.  But, if the rules say otherwise, then the bug should be fixed, or better, IMO, modify the specs to at least throw table and table-cell in with overflow: hidden||auto.

Comment 19 Gérard Talbot 2007-05-11 13:26:58 PDT

1- Gary and Mike: yes, this is a valid bug

2- j.j., Scott, Ornette: please visit bugzilla etiquette
We're all volunteers in a community-driven project here.
"The only person who has any obligation to fix the bugs 
you want fixed is you. Never act as if you expect someone 
to fix a bug by a particular date or release. This is merely 
obnoxious, and is likely to get the bug ignored." 
Bugzilla etiquette

3- "wrapping a table in a div works around this problem":
that would be a poor and weak workaround. Increasing the number of DOM nodes is always a bad workaround. A much better workaround is to set margin-bottom of the nth table to, say, 32px, and then the margin of the nth+1 (following, next sibling) table to 0px. That way, whether vertical adjoining margin collapsing works or not, whether this bug is eventually fixed or not, the resulting margin between consecutive tables will be 32px. No javascript trick needed, no extra markup code needed; just a pure forward-compatible, future-proof CSS workaround.
A real example:

4- "hardcoding this into Mozilla is an easy task"
Ornette, I don't think a fix is that easy. This bug is closely related to the way Mozilla implements caption into the table's margin (see attachment 98261 [details]). In any case, Ornette, you can submit a patch.
Comment 20 Gérard Talbot 2007-11-03 15:29:05 PDT
Dependent on bug 50959
Comment 21 Gérard Talbot 2008-11-22 09:49:08 PST
Updated testcase:

Forward-compatible workaround

max (x, y) = x + y 
only and only when x == 0 or y == 0
where x is the margin-bottom of a table and 
y is the margin-top of the following (next sibling, subsequent) table

Real live example:
Comment 22 David Baron :dbaron: ⌚️UTC-7 2008-12-10 09:24:16 PST
So, in today's CSS working group meeting, the group accepted option 1 in in order to resolve issue 88 on CSS 2.1 (given that there aren't yet any implementations of this).  That would make this bug invalid.

That said, I'll wait a bit before changing the state of this bug.

We should also add reftests to test the correct behavior...
Comment 23 fantasai 2009-05-15 16:32:14 PDT
That decision doesn't affect this bug. That affects whether caption margins collapse with the table, not whether the table margins collapse with other things.
Comment 24 David Baron :dbaron: ⌚️UTC-7 2010-10-17 09:37:41 PDT
*** Bug 372303 has been marked as a duplicate of this bug. ***
Comment 25 David Baron :dbaron: ⌚️UTC-7 2011-06-08 11:38:02 PDT
Ehsan has a patch for this in bug 659828.
Comment 26 :Ehsan Akhgari (Away Oct 25 - Nov 9) 2011-09-29 14:49:49 PDT
This was fixed by bug 659828.  I enabled the tests for this bug:
Comment 27 Eric Shepherd [:sheppy] 2011-12-19 14:19:30 PST
This is just listed on Firefox 10 for developers with a link to the blog post, since it's just bringing us into line with the spec.
Comment 28 Gérard Talbot 2016-07-12 10:02:23 PDT
> Forward-compatible workaround
> =============================
> max (x, y) = x + y 
> only and only when x == 0 or y == 0
> where x is the margin-bottom of a table and 
> y is the margin-top of the following (next sibling, subsequent) table
> Real live example:

Corrected link:

line 52: table {width: 100%; margin: 0px auto 32px auto;}

Note You need to log in before you can comment on or make changes to this bug.