[英]Round thead corners in Firefox with CSS
I would actually want to round thead's corners within a table.我实际上想在桌子内绕过 thead 的角落。 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?谁能告诉我怎么可能?
Here is the jsFiddle I have tried so far:这是我到目前为止尝试过的 jsFiddle:
HTML: HTML:
<table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>
CSS: 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;
}
EDIT in 2020 as I've seen some activity on this answer recently.在 2020 年进行编辑,因为我最近看到了有关此答案的一些活动。
These days you should just use the border-radius
property as all the major browser now support it.现在你应该只使用border-radius
属性,因为所有主要浏览器现在都支持它。
th {
border-radius: 3px;
}
Because the radius needs to be on th
not on thead
.因为半径需要在th
而不是在thead
。 Add something like:添加如下内容:
th {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
(you could remove the border radius info from table thead
) (您可以从table thead
删除边框半径信息)
Also works if you just change table thead
to th
如果您只是将table thead
更改为th
If you have borders, the table's border-collapse css property must be set to 'separate'.如果您有边框,则表格的边框折叠 css 属性必须设置为 'separate'。
table{
border-collapse: separate;
}
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.