I have searched and searched, but haven't been able to find a solution for my requirement.
I have a plain ol' HTML table. I want round corners for it, without using images or JS, i.e. pure CSS only. Like this:
Rounded corners for corner cells, and 1px
thick border for the cells.
So far I have this:
table {
-moz-border-radius: 5px !important;
border-collapse: collapse !important;
border: none !important;
}
table th,
table td {
border: none !important
}
table th:first-child {
-moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
-moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
-moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
background-color: #ddd !important
}
But that leaves me without any borders for the cells. If I add borders, they aren't rounded!
Any solutions?
Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: http://jsfiddle.net/7veZQ/3/
Edit: Here's a relatively clean implementation of your sketch:
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
}
td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}
th {
background-color: blue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}
<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>