I tried two things that might save you time if you’re still working on this problem. First, I decided that if you didn’t need the border around the table, you could set the padding on the table, and that would avoid the overlap problem. Because the issue is with the width of the table’s box being set the same as the total width of the containing box. If there’s no margin to make life hard, then it ends up being the same; then the padding pushes the content in by x pixels.

In IE, as an aside, it calculates the widths incorrectly, so in this case it works fine with the table’s width set to 100%. Instead of setting the width to 100% of the containing box’s total width, it pushes the table out as far as it can go before it bumps into something.

Deciding that the border might be important, I decided to give one last thing a try. Set the width dynamically after rendering via javascript. Probably not acceptable as a solution, but it sounded interesting to try!

Unfortunately, in the 20 minutes I thought I’d budget for that solution, I couldn’t come up with a reliable way to actually get the rendered width of the containing div so I could set the width of the table appropriately.

So I gave up. I’m tired.

Those were my thoughts.

Now if you would kindly refrain from pointing out horrible box model problems while I’m just warming up to my new client-side coding job at work, that would be great. You’re stressing me out.

That’s interesting, I never even thought to apply padding to the table itself. I would’ve thought it would mess up the display, or do nothing at all. I’ll have to try it out.

I’ve written javascript like what you describe before, to create a scrollable table (that would work in IE) at a previous job. Not the most fun thing to write, and not worth it, I think, unless you’re trying to do something fancy like a scrolling table.

I have never really been confronted with this problem, becuase usually I already have padding on the outside DIV, and the inner table doesn’t need any.

(I suppose if I tried what you mentioned, I would run into the same issue)

In general, I do notice that tables act goofy while inside divs.

“Cellspacing” is the only attribute I leave in the TABLE tag, because there is no current CSS support for cellspacing. But sometimes when I change the value of that attribute, the table does goofy things.

Divs and tables don’t mix very well.

I’m sure there will be better support for tables in later versions of CSS.

To get a cellspacing of 10 pixels on a table, you’d simply use a rule like this:

table {
border-collapse:separate;
border-spacing:10px;
}

Works nicely in Firefox and Opera.

(I added the padding to the div - not the table

Demo here -> http://richardathome.no-ip.com/examples/full_width_tables/index.php

You could choose to pad your container instead of using a margin on the table, but sometimes you need that container to not have any padding for other reasons.