Edit – Original Title: Is there an alternative way to achieve
CSS (in order to have a collapsed, rounded corner table)?
Since it turns out that simply getting the table's borders to collapse does not solve the root problem, I have updated the title to better reflect the discussion.
I am trying to make a table with rounded corners using the
border-radius property. The table styles I'm using look something like this:
Here's the problem. I also want to set the
border-collapse:collapse property, and when that is set
border-radius no longer works. Is there a CSS-based way I can get the same effect as
border-collapse:collapse without actually using it?
I've made a simple page to demonstrate the problem here (Firefox/Safari only).
It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner
td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom
td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner
td elements would show their rounded corners as well.
Summary of proposed solutions:
Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."
Specifying border width to 0 doesn't collapse the table.
td corners still square after setting cellspacing to zero.
The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.
- part of the appeal that using border-radius has for me is graceful degradation and progressive enhancement. By using border-radius for all rounded corners, I hope to have a consistently rounded site in CSS3-capable browsers and a consistently square site in others (I'm looking at you, IE).
I know that trying to do this with CSS3 today may seem needless, but I have my reasons. I would also like to point out that this problem is a result of the w3c specification, not poor CSS3 support, so any solution will still be relevant and useful when CSS3 has more widespread support.