Table border-collapse: collapse; in Mozilla/Firefox

Tables with border collapse in Firefox seem to be eating the space around

[CatalinRotaru]

I noticed a weird behavior in Firefox and I wonder if anybody else saw it too.

If I have a table in the HTML and the following CSS:

table
{
border-collapse: collapse;
width: 100%;
}

table td
{
border: 30px solid white;
}

In Firefox, the table seems to take the space for the border from AROUND the computed table size. This makes the table bigger than the BODY element - the browser windows horizontal scrollbar appears. Also, any table before or after this table will be overlapped, etc.

Weird!

Works fine in IE though. Any clues, pointers, workarounds, etc?

Thanks,
Cata

[dcrombie]

Using the W3C-approved box model the table contents will extend to 100% of the page width, with the borders added to that.
So it's Explorer that's getting it wrong (as usual ;)).

Unfortunately, without knowing more about the context, I don't have a fix. I'm sure one of the CSS-gurus can help.

[CatalinRotaru]

Ah... darn, I was afraid of that.

Then how can I specify that a table (or div for that matter) should occupy 100% of the parent, with the border fitting inside that space?

Cata

[dcrombie]

A div will do that by default. To be precise, the (internal) width will be calculated so that it's equal to 100% - margins - borders - padding ;)