使用CSS在Firefox中围绕thead角落

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属性必须设置为"separate".

table{
    border-collapse: separate;
}