我尝试使用伪元素:before和:after在thead th:first-child和thead th:last-child上

结合使用<div class="radius borderCCC">包装表

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

见 jsFiddle

适用于我的chrome(13.0.782.215)让我知道这是否适用于其他浏览器。

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

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:

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

正如Ian所说，解决方案是将表嵌套在一个div中，并像这样设置:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

使用overflow:隐藏，方角不会溢出div。

我总是这样用Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

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

你可以更深入地使用其他伪选择器来满足你的需求，比如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>

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

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