编辑-原标题:是否有其他方式来实现border-collapse:collapse
的CSS
(为了有倒塌,圆角表)?
事实证明,仅使表格的边框折叠起来并不能解决根本问题,因此我更新了标题以更好地反映讨论内容。
我正在尝试使用该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)。
看来问题的很大一部分是将表设置为具有圆角不会影响Corner td
元素的角。如果桌子全是一种颜色,那将不是问题,因为我可以td
分别使第一行和最后一行的上角和下角变圆。但是,我在表中使用了不同的背景色来区分标题和条纹,因此内部td
元素也将显示其圆角。
拟议解决方案摘要:
用另一个带有圆角的元素包围桌子是行不通的,因为桌子的四角“渗出了”。
将边框宽度指定为0不会折叠表格。
底部td
四角设置CELLSPACING零后仍然广场。
相反,使用JavaScript可以避免此问题。
可能的解决方案:
这些表是用PHP生成的,因此我可以将一个不同的类应用于每个外部th / tds并分别设置每个角的样式。我不想这样做,因为它不是很优雅,并且要应用于多张桌子有点痛苦,所以请继续提出建议。
可能的解决方案2是使用JavaScript(特别是jQuery)对角进行样式设置。此解决方案也可以使用,但仍然不是我想要的(我知道我很挑剔)。我有两个保留意见:
- 这是一个非常轻量级的网站,我希望将JavaScript保持在最低水平
- 使用边界半径对我来说具有吸引力的一部分是优美的退化和渐进的增强。通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一个一致的圆形站点,并在其他浏览器中拥有一个一致的正方形站点(我在看着您,IE)。
我知道今天尝试使用CSS3似乎没有必要,但是我有自己的理由。我还要指出的是,此问题是w3c规范的结果,而不是CSS3的支持不佳,因此,当CSS3得到更广泛的支持时,任何解决方案都仍然是相关且有用的。