5

我实际上想在一张桌子内绕过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/

4

2 回答 2

13

在 2020 年进行编辑，因为我最近在这个答案上看到了一些活动。

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

th {
    border-radius: 3px;
}

因为半径需要打开th而不是打开thead。添加类似：

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

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

如果您只是更改table thead为th

如果有边框，表格的border-collapse css 属性必须设置为'separate'。

table{
    border-collapse: separate;
}
于 2013-07-03T14:30:21.037 回答
3 
  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;
}

小提琴

于 2013-07-03T14:39:06.340 回答