Css 如何创建具有圆形边缘和网格表格样式的表格？

我试过很多方法来弄圆边缘，但都不管用。以下是我目前掌握的代码：

<div style="border-radius: 5px;">
    <table style="margin-left: 10px; padding-right: 0px; width: 710px;border-collapse:collapse; border-radius: 5px;" 
    class="ui-widget-content">
        <tr class="ui-state-default">
            <th>abc</th>
            <th>def</th>
            <th>xxx</th>
            <th>xxx</th>
        </tr>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
        </tr>
    </table> 
</div>

abc
def
xxx
xxx
A.
B
C
D

我真正的目标是拥有一张这样的桌子：有人能建议我如何获得顶部面板、底部面板和圆角（css）吗

---

请注意，我尝试混入一些jQueryUI主题类。但这些似乎没有帮助，所以我认为他们需要删除。我只想要一个非常简单的实现，看起来像上面例子中的网格

您上面编写的代码在哪些浏览器上不起作用

我认为，您上面粘贴的代码仅适用于IE9

在css中应该有这样的内容：

  .roundedCorners{
      -webkit-border-radius: 10px;/*For Google Chrome*/
      -moz-border-radius: 10px;/*For Mozilla*/
      border-radius: 10px;/*Standard Specification*/
  }

---

你的代码确实有效；但是，如果没有背景色，您无法看到它对它的影响。当我加上“背景色：#f00；”时，我可以看得非常清楚。我还建议X-Ware遵循这些代码，因为这种类型的css不适用。因此，该代码用于修复将来可能出现的任何兼容性问题

---

记住，圆角在IE6、IE7、IE8或IE9中不起作用。为此，我建议您尝试过哪些方法？你这样做的时候发生了什么？我试过上面的代码。我把边界半径放在桌子上，还有一个div。但我的浏览器是最新的firefox，没有圆角。将背景添加到table元素后，您的示例具有圆角边框。请提供一个加载了jQuery UI的JSFiddle.net，以及您可能使用的主题，好吗？Border radius在IE9中可以工作。您可能应该只向IE6-8用户显示正常的角点。CSS3 Pie对性能影响很大，毕竟，这些圆角对任何用户来说都不是关键。