Full width tables using CSS?
Has anybody found a way to make a table with a margin fill up all horizontal space (the same way a div does) using CSS and no extra markup?
Because of the way the box model is defined, using a width of 100% only works if the table has no margin, otherwise, the table is the same width as its containing object, and the margin ends up pushing it out of its container.
| Table |
<div style="border:1px solid black; width:400px">
<table style="border:1px solid blue; width:100%; margin:10px">
<tr><td>Table</td></tr>
</table>
</div>
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.
I tried using display:block on my table to try to get it to act like a div, but that didn’t help.
They really should provide a way of doing this. I guess I can understand having width:auto for a table be “just enough to fit the contents”, but can’t they give us a width:full or something so we can get the same behavior as the width:auto on a div?
I guess it’s easy enough to get around if you don’t mind sticking an extra div in there, but I don’t like having to add extra markup for a presentational issue.
| Table |
<div style="border:1px solid black; width:400px">
<div style="margin:10px">
<table style="border:1px solid blue; width:100%">
<tr><td>Table</td></tr>
</table>
</div>
</div>
August 10th, 2004 at 11:09 pm
Nothing like a good impossible problem to have me puzzling for a while late-night.
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.
August 11th, 2004 at 7:39 pm
Hi Andrew,
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.
August 24th, 2004 at 1:21 pm
It’s interesting that you mention this problem.
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.
August 24th, 2004 at 2:59 pm
Actually, CSS does provide a way to get cellspacing, but it appears that IE doesn’t support it.
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.
August 26th, 2004 at 5:56 am
or you could try:
(I added the padding to the div - not the table
Demo here -> http://richardathome.no-ip.com/examples/full_width_tables/index.php
August 26th, 2004 at 5:57 am
gahhh - my bad - forgot to escape my html (blush) - view source on the demo.
August 26th, 2004 at 11:16 am
Yeah, I knew that would work, but in this case I didn’t want to pad the div, because I wanted to be able to have some contained elements span the whole width of the div, going right up to the edge.