html - 圆 table Angular 仅 CSS

Question

我搜索了又搜索，但未能找到满足我要求的解决方案。

我有一个普通的 HTML 表格。我想要圆 Angular ，不使用图像或 JS，即纯 仅 CSS。像这样:

Angular 单元格的圆 Angular 和单元格的 1px 粗边框。

到目前为止我有这个:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

但这让我的单元格没有任何边界。如果我添加边框，它们不会变圆!

有什么解决办法吗？

Answer 1

似乎在带有单独边框的 FF 和 Chrome(尚未测试任何其他)中工作正常:http://jsfiddle.net/7veZQ/3/

编辑:这是草图的一个相对简洁的实现:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/