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(为了有一个折叠的，圆角表)?

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.

我正在尝试使用 CSS3 border-radius 属性制作带有圆角的表格.我使用的表格样式如下所示:

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
}

问题来了.我还想设置 border-collapse:collapse 属性，设置后 border-radius 不再有效.有没有一种基于 CSS 的方法可以在不实际使用的情况下获得与 border-collapse:collapse 相同的效果?

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?

我制作了一个简单的页面来演示问题此处(仅限 Firefox/Safari).

I've made a simple page to demonstrate the problem here (Firefox/Safari only).

似乎很大一部分问题是将表格设置为圆角并不会影响td元素的角.如果表格都是一种颜色，这不会成为问题，因为我可以分别为第一行和最后一行制作顶部和底部 td 角.但是，我为表格使用了不同的背景颜色来区分标题和条纹，因此内部 td 元素也会显示它们的圆角.

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.

建议的解决方案摘要:

用另一个带圆角的元素围绕桌子是行不通的，因为桌子的方角会渗出".

Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."

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

Specifying border width to 0 doesn't collapse the table.

将单元格间距设置为零后，底部 td 角仍然是正方形.

Bottom td corners still square after setting cellspacing to zero.

改用 JavaScript - 避免问题.

Using JavaScript instead- works by avoiding the problem.

可能的解决方案:

表格是用 PHP 生成的，所以我可以将不同的类应用到每个外部 th/tds 并分别设置每个角的样式.我宁愿不这样做，因为它不是很优雅，而且应用于多个表有点痛苦，所以请继续提出建议.

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.

可能的解决方案 2 是使用 JavaScript(特别是 jQuery)来设置角的样式.这个解决方案也有效，但仍然不是我想要的(我知道我很挑剔).我有两个保留意见:

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. 这是一个非常轻量级的网站，我希望将 JavaScript 保持在最低限度
2. 使用 border-radius 的部分吸引力在于优雅降级和渐进增强.通过对所有圆角使用 border-radius，我希望在支持 CSS3 的浏览器中拥有一个始终为圆形的站点，而在其他浏览器中拥有一个始终为方形的站点(我在看你，IE).

我知道今天尝试用 CSS3 做到这一点似乎没有必要，但我有我的理由.我还要指出，这个问题是 w3c 规范的结果，而不是糟糕的 CSS3 支持，所以当 CSS3 得到更广泛的支持时，任何解决方案仍然是相关和有用的.

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.

使表格的角变圆的问题是 td 元素也没有变圆.您可以通过执行以下操作来解决此问题:

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;
}

现在一切都正常了，除了仍然存在 border-collapse: collapse 破坏一切的问题.

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.

一种解决方法是添加border-spacing:0 并在表格上保留默认的border-collapse:separate.

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