StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?
text
Body
copied!<p><strong>Edit - Original Title:</strong> Is there an alternative way to achieve <code>border-collapse:collapse</code> in <code>CSS</code> (in order to have a collapsed, rounded corner table)?</p> <p>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.</p> <p><strong>I am trying to make a table with rounded corners</strong> using the <code>CSS3</code> <code>border-radius</code> property. The table styles I'm using look something like this:</p> <pre><code>table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } </code></pre> <p>Here's the problem. I also want to set the <code>border-collapse:collapse</code> property, and when that is set <code>border-radius</code> no longer works. Is there a CSS-based way I can get the same effect as <code>border-collapse:collapse</code> without actually using it?</p> <p><strong>Edits:</strong></p> <p>I've made a simple page to demonstrate the problem <a href="http://vamin.net/examples/rounded_tables.html" rel="noreferrer">here</a> (Firefox/Safari only).</p> <p>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 <code>td</code> elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom <code>td</code> 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 <code>td</code> elements would show their rounded corners as well.</p> <p><strong>Summary of proposed solutions:</strong></p> <p>Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."</p> <p>Specifying border width to 0 doesn't collapse the table.</p> <p>Bottom <code>td</code> corners still square after setting cellspacing to zero.</p> <p>Using JavaScript instead- works by avoiding the problem.</p> <p><strong>Possible solutions:</strong></p> <p>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.</p> <p>Possible solution 2 is to use JavaScript (jQuery, specifically) to style the corners. This solution also works, but still not quite what I'm looking for (I know I'm picky). I have two reservations: </p> <ol> <li>this is a very lightweight site, and I'd like to keep JavaScript to the barest minimum </li> <li>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).</li> </ol> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload