我试图使用CSS border-radius属性制作一个圆角表。我使用的表格样式是这样的:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
问题来了。我还想设置border-collapse:collapse属性，当设置border-radius时，它不再起作用。是否有一种基于css的方式，我可以得到相同的效果边界崩溃:崩溃而不实际使用它?
似乎很大一部分问题是，将表格设置为圆角并不影响角td元素的角。如果表格都是一种颜色，这就不是问题，因为我可以让顶部和底部td角分别为第一行和最后一行圆角。但是，我使用了不同的背景色来区分标题和条纹，所以内部td元素也会显示它们的圆角。
用另一个圆角元素包围桌子是行不通的，因为桌子的方角“渗透进来”。
将边框宽度指定为0不会折叠表格。
在将cellspacing设置为零后，底部td角仍然是正方形。
这些表是用PHP生成的，所以我可以对每个外部th/tds应用不同的类，并分别设置每个角的样式。我宁愿不这样做，因为它不是很优雅，而且应用于多个表有点痛苦，所以请继续提出建议。
我希望不使用JavaScript。
据我所知，你能做到的唯一方法是修改所有的单元格，就像这样:
table td {
border-right-width: 0px;
border-bottom-width: 0px;
}
然后在底部画出边界，然后再画回来
table tr td:last-child {
border-right-width: 1px;
}
table tr:last-child td {
border-bottom-width: 1px;
}
:last-child在ie6中无效，但如果你使用border-radius，我假设你不在乎。
编辑:
在查看示例页面后，似乎可以通过单元格间距和填充来解决这个问题。
您所看到的厚厚的灰色边框实际上是表格的背景(如果您将边框颜色更改为红色，就可以清楚地看到这一点)。如果你将cellspacing设置为0(或等价地:td, th {margin:0;})灰色的“边界”将消失。
编辑2:
只有一张桌子，我不知道该怎么做。如果将标题行更改为嵌套表，可能会得到想要的效果，但这需要更多的工作，而且不是动态的。
我想明白了。你只需要使用一些特殊的选择器。
圆角的问题是，td元素并没有变成圆角。你可以这样解决这个问题:
表tr:最后一个孩子td:第一个孩子{
边框:2px纯橙色;
border-bottom-left-radius: 10 px;
｝
表tr:最后一个子td:最后一个子{
边框:2px纯绿色;
border-bottom-right-radius: 10 px;
｝
<表>
tbody > <
< tr >
< td > 1道明> < /
2 < td > < / td >
< / tr >
< tr >
< td > 3 < / td >
4 < td > < / td >
< / tr >
tbody > < /
表> < /
现在所有东西都四舍五入了，除了边界崩溃的问题:崩溃破坏了所有东西。
一个解决方法是添加border-spacing: 0，并在表中保留默认的border-collapse: separate。
给出的答案只有在没有国界的情况下才有效，这是非常有限的!
我在SASS中有一个宏来做这件事，它完全支持外部和内部边界，实现了与border-collapse相同的样式:在没有实际指定的情况下崩溃。
在FF/IE8/Safari/Chrome测试。
在所有浏览器中提供漂亮的纯CSS圆形边界，但IE8(优雅地退化)，因为IE8不支持边界半径:(
一些较老的浏览器可能需要供应商前缀来使用border-radius，因此可以根据需要将这些前缀添加到代码中。
这个答案不是最短的，但很管用。
.roundedTable {
border-radius: 20px / 20px;
border: 1px solid #333333;
border-spacing: 0px;
}
.roundedTable th {
padding: 4px;
background: #ffcc11;
border-left: 1px solid #333333;
}
.roundedTable th:first-child {
border-left: none;
border-top-left-radius: 20px;
}
.roundedTable th:last-child {
border-top-right-radius: 20px;
}
.roundedTable tr td {
border: 1px solid #333333;
border-right: none;
border-bottom: none;
padding: 4px;
}
.roundedTable tr td:first-child {
border-left: none;
}
要应用此样式，只需更改您的
<table>
标签如下:
<table class="roundedTable">
并确保在你的HTML中包含上述CSS样式。
希望这能有所帮助。
