使用CSS在Firefox中解决问题 [英] Round thead corners in Firefox with CSS

问题描述

我实际上是想在桌子上四角形。就我而言，这似乎是不可能的。我已经尝试了几乎所有东西，但是我无法使它正常工作。

I would actually want to round thead's corners within a table. It doesn't seems to be possible as far as I'm concerned. I have tried almost everything but I couldn't get it work.

问题是我基本上有一张桌子，桌子上有一个特殊的颜色，比如黑色，我想通过四舍五入将其四舍五入。

The problem is that I basically have a table which's thead has a particual color, let's say black, and I'd like to give it a little rounding by rounding it's corners.

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

Can anyone please tell me how is it possible?

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

Here is the jsFiddle I have tried so far:

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/

推荐答案

因为半径必须在 而不是 thead 。添加类似的内容：

Because the radius needs to be on th not on thead. Add something like:

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

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

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

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

If you have borders, the table's border-collapse css property must be set to 'separate'.

table{
    border-collapse: separate;
}

这篇关于使用CSS在Firefox中解决问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！