css - 如何创建具有圆边和类似网格表样式的表格？

Question

我尝试了很多方法来使边缘变圆，但都行不通。这是我到目前为止的代码:

<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>

我真正的目标是拥有一个如下所示的表格:grid谁能建议我如何获得顶部面板、底部面板和圆 Angular (css)？

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

Answer 1

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

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

你的 css 中应该有这样的东西:

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