Question

我实际上想要围绕桌子中的角落。就我而言，这似乎是不可能的。我已经尝试了几乎所有的东西，但我无法让它发挥作用。

问题是我基本上有一张桌子，其中有一个特殊的颜色，让我们说黑色，我想通过四舍五入的方式给它一点点圆角。

有人可以告诉我怎么可能？

这是我到目前为止尝试过的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

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

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

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

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

，也可以使用

如果您有边框，则表格的border-collapse css属性必须设置为“单独”。

table{
    border-collapse: separate;
}

Answer 2

table  th:nth-child(1){
    border-radius: 3px 0px 0px 3px;
}
table  th:nth-last-child(1){
    border-radius: 0px 3px 3px 0px;
}

Fiddle

使用CSS在Firefox中围绕thead角落

2 个答案: