This is a demonstration of how, in border-collapse, not incorporating the outer half of table borders into the margins causes problems. The formatting on this table is reasonable; it's not an edge case I am demonstrating here, although I've thickened the borders to make the problems easier to see. (The problem would exist nonetheless.) In Mozilla, a browser that obeys the CSS2 border-collapse rules most carefully, it looks wrong.
Heading 1 | Heading 2 | Heading 3 |
---|---|---|
Data cell | Data cell | Data cell |
Data cell | Data cell | Data cell |
Data cell | Data cell | Data cell |
Data cell | Data cell | Data cell |
Data cell | Data cell | Data cell |
Data cell | Data cell | Data cell |
Mozilla's behavior in Standards mode causes the borders to overwrite adjacent content, which is undesirable. It's behavior in Quirks mode attempts to solve this problem by making the outer half of the table borders part of the table box's border area. However, since the border-box is the boundary for backgrounds, this causes the table's background to overflow its edges where the border is narrower.
For those of you without a copy of Mozilla, I've provided screenshots: