Border Radius of Table is not working
border-collapse: separate !important;
worked.
Thanks.
HTML
<table class="bordered">
<thead>
<tr>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: separate !important;
border-spacing: 0;
width: 600px;
margin: 30px;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #ECECEC;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #ECECEC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC));
background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC);
background-image: linear-gradient(top, #F8F8F8, #ECECEC);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
jsFiddle
It works, this is a problem with the tool used: normalized CSS by jsFiddle is causing the problem by hiding you the default of browsers...
See http://jsfiddle.net/XvdX9/5/
EDIT:
normalize.css stylesheet from jsFiddle adds the instruction border-collapse: collapse
to all tables and it renders them completely differently in CSS2.1:
- The separated borders model
- The collapsing border model
Differences between the 2 models can be seen in this other fiddle: http://jsfiddle.net/XvdX9/11/ (with some transparencies on cells and an enormous border-radius on the top-left one, in order to see what happens on table vs its cells)
In the same CSS2.1 page about HTML tables, there are also explanations about what browsers should/could do with empty-cells in the separated borders model, the difference between border-style: none
and border-style: hidden
in the collapsing borders model, how width is calculated and which border should display if both table, row and cell elements define 3 different styles on the same border.
This is my solution using the wrapper, just removing border-collapse
might not be helpful always, because you might want to have borders.
.wrapper {
overflow: auto;
border-radius: 6px;
border: 1px solid red;
}
table {
border-spacing: 0;
border-collapse: collapse;
border-style: hidden;
width:100%;
max-width: 100%;
}
th, td {
padding: 10px;
border: 1px solid #CCCCCC;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo Bar boo</td>
<td>Lipsum</td>
<td>Beehuum Doh</td>
</tr>
<tr>
<td>Dolor sit</td>
<td>ahmad</td>
<td>Polymorphism</td>
</tr>
<tr>
<td>Kerbalium</td>
<td>Caton, gookame kyak</td>
<td>Corona Premium Beer</td>
</tr>
</tbody>
</table>
</div>
This article helped: https://css-tricks.com/table-borders-inside/