CODEWITHSUNDEEP
csshtml
Nathanael
Nathanael

Reputation: 7173

Applying a colspan via CSS?

So, I am making a CSS layout that takes advantage of display:table, display:table-row, and display:table-cell. However, I've run into a problem:

I need to apply a colspan to one of my DIVs.

However, adding this attribute to a DIV is pretty much pure evil. What are my options?

See: http://jsfiddle.net/RhFz6

EDIT:

I found a solution: http://jsfiddle.net/RhFz6/4

Instead of making everythingggg a table, I just made the center area a table. The header and footer were left as block elements. From there, I gave the table 100% height, and negative margins so it fits in the page. It turned out beautifully!

Upvotes: 1

Views: 3339

Answers (4)

Nathanael
Nathanael

Reputation: 7173

I figured it out, and my solution actually doesn't require a wrapper either, which is really nice. See here:

http://jsfiddle.net/RhFz6/4

What made my situation difficult was the fact that I needed three columns in the main body area, in addition to a header and footer. Furthermore, the layout was fluid-width, so I couldn't just use pseudo-columns. Of course, I didn't want to use a table either, because, well, I'd feel guilty. :P

Instead of treating the entire layout like a table, which was the reason I need a column span, I simply made the center area a table. The header and footer were simply displayed as block elements. I then set the height of html and body to 100%, and then made the center content area have a height of 100%. Unfortunately, this pushed the minimum-size layout past the window area, as it was a 100% height plus the header and footer.

To get around that, I just added some negative margins, to the pseudo-table, some positive padding to the cells (so you can still see the content after the header and footer overlap the table), and some fancy z-index work (because the header was beneath the table, not above it)

And, well, ta-da! Works in all modern browsers, but not tested in older ones. Thanks for your help!

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

I don't understand why people would rather make their lives a living hell trying to fake a table, when the <table> tag is still there and perfectly valid for use. Use tables, and you can apply all the rowspan and colspan you want. Add table-layout: fixed and you can reliably specify the width and height of the cells, leaving no downside so far as I can see.

Tables even have useful features, such as cellIndex and rowIndex, grouping tHead, tFoot and tBodies[] together. There's plenty of things made a lot easier by using the properties that tables expose to us.

Upvotes: 3

Sean Johnson
Sean Johnson

Reputation: 5607

Do you absolutely have to fake a table? From your JSFiddle, it looks like you're just trying to get #sidebar and #content next to one another. This could be done fairly easy with floats. If you're trying to get the #sidebar and #content divs to have a background and want them to be identical in height, try putting the background you'd put on #sidebar on #main instead. It would still look the same, even though #sidebar wouldn't be the element with the background.

Proof of concept: http://jsfiddle.net/RhFz6/3/

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

Not sure if this is the "evil" option you were referring to, but there's a column-span property, though it looks like it's only supported by Chrome and Opera at present.

Edit:

Looking at the fiddle example, if the colspan is only needed on the first and last row (the table header and footer), then you should have some options. Even if you fake those rows it won't disrupt the consistent columns sizes of the inner rows.

Upvotes: 0

Related Questions