The border-collapse dilemma

The border-collapse property is great but watch out for how your borders behave. You may find yourself in for a surprise.

Why the surprise? Because IE and Opera behave differently than Mozilla in how it handles the table border when in collapse mode.

IE and Opera handle it in a way that feels very intuitive. Any margin and table border simply pushes everything in from the top left of its 'box'. If you take a look at the Scenario 3 of the Examples you'll see a 5px margin along with a 10px table border.

But Mozilla interprets the CSS2.1 spec differently and therefore you'll see that in Scenario 3 that there is no visible margin.

The spec simply says "any excess [border] spills into the margin area of the table." It doesn't touch on what should happen if the border exceeds the margin. Nor does it clarify whether the table border should spill into the table margin or if only cell borders that exceed the table border should. Although, the former is somewhat implied with the accompanying image.

Therefore, IE and Opera do not follow the spec by not allowing borders to spill into the margins and Mozilla's interpretation means that you'll have to ensure overlapping elements are displayed like you anticipated.

Notes

Mozilla only exhibits this behaviour if a doctype is specified (which it should be).

Links

Browsers tested:

Published September 06, 2004 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/215

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.