我试图使用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。


当前回答

实际上,您可以在div中添加表作为其包装器。然后将这些CSS代码分配给包装器:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

其他回答

据我所知,你能做到的唯一方法是修改所有的单元格,就像这样:

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:

只有一张桌子,我不知道该怎么做。如果将标题行更改为嵌套表,可能会得到想要的效果,但这需要更多的工作,而且不是动态的。

我看到了很多奇怪的黑客和变通办法,所以我想建议我的解决方案,创建一个表与边界半径和相同的视觉效果的边界:崩溃;通过简单地锁定嵌套的行和单元格来关闭边框。

你可以更深入地使用其他伪选择器来满足你的需求,比如first-child,等等,但这是最小的解决方案:

table { width: 100%; border-spacing: 0; border-radius: 4px; border: 1px solid #ccc; } th, td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; } <table> <thead> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </tbody> </table>

如果你想要一个css解决方案(不需要在HTML中设置cellspacing=0),允许1px边界(你不能用border-spacing: 0解决方案),我更喜欢做以下事情:

为你的表格单元格(td和th)设置border-right和border-bottom 给第一行中的单元格一个border-top 给第一列中的单元格一个border-left 使用第一个子和最后一个子选择器,在四个角中为表单元格画出适当的角。

点击这里查看演示。

给定以下HTML:

SEE example below: table { border-collapse: separate; border-spacing: 0; min-width: 350px; } table tr th, table tr td { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th { background: #eee; text-align: left; border-top: solid 1px #bbb; } /* top-left border-radius */ table tr:first-child th:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table tr:first-child th:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table tr:last-child td:last-child { border-bottom-right-radius: 6px; } <div> <table> <tr> <th>item1</th> <th>item2</th> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> </table> </div>

您可能需要在表格周围放置另一个元素,并将其样式设置为圆形边框。

工作草案规定,当border-collapse的值为collapse时,border-radius不适用于表元素。

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

圆角的问题是,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。