Reputation: 191
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?
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;
}
Upvotes: 7
Views: 24444
Reputation: 2642
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;
}
Upvotes: 5
Reputation: 19319
EDIT in 2020 as I've seen some activity on this answer recently.
These days you should just use the border-radius
property as all the major browser now support it.
th {
border-radius: 3px;
}
Because the radius needs to be on th
not on thead
. Add something like:
th {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
(you could remove the border radius info from table thead
)
Also works if you just change table thead
to th
If you have borders, the table's border-collapse css property must be set to 'separate'.
table{
border-collapse: separate;
}
Upvotes: 15