使用 CSS 在 Firefox 中圆角

Question

我实际上想在桌子内绕过 thead 的角落。 就我而言，这似乎不可能。 我已经尝试了几乎所有的东西，但我无法让它工作。

问题是我基本上有一张桌子，上面有一个特殊的颜色，比如说黑色，我想通过圆角来给它一点圆角。

谁能告诉我怎么可能？

这是我到目前为止尝试过的 jsFiddle：

HTML：

    <table>
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
        </tr>
    </thead>
</table>

CSS：

table {
    margin: 0px auto;
    clear: both;
    width: 100%;
    border: 1px solid white;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: white;
}

table thead {
    background: black;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

http://jsfiddle.net/fhyWp/2/

Answer 1

在 2020 年进行编辑，因为我最近看到了有关此答案的一些活动。

现在你应该只使用border-radius属性，因为所有主要浏览器现在都支持它。

th {
    border-radius: 3px;
}

因为半径需要在th而不是在thead 。 添加如下内容：

th {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

（您可以从table thead删除边框半径信息）

如果您只是将table thead更改为th

如果您有边框，则表格的边框折叠 css 属性必须设置为 'separate'。

table{
    border-collapse: separate;
}

Answer 2

  table  th:nth-child(1){

    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 3px 0px 0px 3px; 

    /* Firefox 1-3.6 */
    -moz-border-radius: 3px 0px 0px 3px; 
  
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 3px 0px 0px 3px; 
    }

    table  th:nth-last-child(1){
      /* Safari 3-4, iOS 1-3.2, Android 1.6- */
      -webkit-border-radius: 0px 3px 3px 0px; 

      /* Firefox 1-3.6 */
      -moz-border-radius: 0px 3px 3px 0px; 
  
      /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
      border-radius: 0px 3px 3px 0px;
}

小提琴