CSS3的border-radius属性和border-collapse：collapse不要混合。如何使用border-radius创建带圆角的折叠表？ [英] CSS3'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?

问题描述

编辑 - 原始标题： CSS 中还有另一种方法可以实现 border-collapse：collapse code>（为了有一个折叠的圆角角表）？

因为它原来是简单地让表的边框折叠不解决根

我想使用圆角表格，使用<$ c 标签来更好地反映讨论。 $ c> CSS3 border-radius 属性。我使用的表格样式看起来像这样：

  table {
 -moz-border-radius：10px ; 
 -webkit-border-radius：10px; 
 border-radius：10px 
} 
  

我还想设置 border-collapse：collapse 属性，当设置 border-radius 。有没有基于CSS的方式，我可以得到与 border-collapse：collapse 相同的效果，而不实际使用它？

修改：

我已经做了一个简单的页面来演示问题此处（仅适用于Firefox / Safari）。

似乎很大一部分问题是将表格设置为圆角不会影响角落的角落 td 元素。如果表是所有的一个颜色，这不会是一个问题，因为我可以让顶部和底部 td 分别为第一和最后一行四角。但是，我使用不同的背景颜色为表格区分标题和条带，所以内部 td 元素也会显示它们的圆角。

建议解决方案摘要：

使用带圆角的另一个元素包围表格不起作用因为表格的方形角渗透。

指定边框宽度为0不会折叠表格。

使用JavaScript代替 - 通过避免此问题，可以将

c>

这些表是用PHP生成的，所以我可以只对每个外部th / tds和每个角分别应用不同的类。我不想这样做，因为它不是很优雅，有点疼痛适用于多个表，所以请保持建议来。

可能的解决方案2使用JavaScript（特别是jQuery）来定义角的样式。这个解决方案也有效，但仍然不是我想要的（我知道我很挑剔）。我有两个保留：

1. 这是一个非常轻量级的网站，我想将JavaScript保持最低限度


2. 部分的使用border-radius对我来说是优雅的退化和逐步增强。通过对所有圆角使用border-radius，我希望在支持CSS3的浏览器中有一个一贯的圆角网站，而在其他网站上则是一个一致的方形网站（我在看你，IE）。

我知道，今天尝试用CSS3做这件事可能看起来不必要，但我有我的理由。我还要指出，这个问题是w3c规范的结果，而不是差的CSS3支持，所以任何解决方案仍将是相关的，当CSS3有更广泛的支持。

解决方案

我想出来了。你只需要使用一些特殊的选择器。

表格四舍五入的问题是td元素不会变圆。你可以这样做：

  table tr：last-child td：first-child {
 border-bottom-left-radius：10px; 
} 
 
表tr：last-child td：last-child {
 border-bottom-right-radius：10px; 
} 
  

现在一切正常，除了仍然有 border-collapse：collapse 打破一切。解决方法是改为在HTML中设置 cellspacing =0（感谢 Joel ）。

Edit - Original Title: Is there an alternative way to achieve border-collapse:collapse in 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 CSS3 border-radius property. The table styles I'm using look something like this:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

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?

Edits:

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.

Bottom td corners still square after setting cellspacing to zero.

Using JavaScript instead- works by avoiding the problem.

Possible solutions:

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.

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:

1. this is a very lightweight site, and I'd like to keep JavaScript to the barest minimum
2. 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.

解决方案

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything. A workaround is to set cellspacing="0" in the html instead (thanks, Joel).

这篇关于CSS3的border-radius属性和border-collapse：collapse不要混合。如何使用border-radius创建带圆角的折叠表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！