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任何人都可以建议我如何获得顶部面板，底部面板和圆角（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*/
  }

Answer 2

你的代码确实有效;但是，你不能看到它没有背景颜色。当我添加“background-color：＃f00;”时我看得很清楚。我还建议遵循X-Ware的代码，因为这种类型的css不是批准的。因此，该代码用于修复将来可能出现的任何兼容性问题。

请记住，圆角在IE6，IE7，IE8或IE9中不起作用。为此，我建议CSS3 Pie

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

2 个答案: