Rounded tables in Twitter Bootstrap 3
Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-bordered
class, please?
UPDATE
So far I've come to this code, with no effect.
CSS taken from Bootstrap 2.3.2:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
HTML code:
<table class="table table-hover table-responsive table-bordered">
<thead>
<tr>
<th style="width: 50%">
Config. Name
</th>
<th>
API Calls
</th>
<th>
Current Amount
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="/searchsources/details">Agennda</a>
</td>
<td>
2,876
</td>
<td>
$ 80.67
</td>
<td>
<a href="/searchsources/details">Edit</a>
</td>
</tr>
</tbody>
</table>
If you surround the table with a panel you get your rounded corners.
Like this:
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
"table-responsive" goes on a div that wraps the table, not on the table itself.
In normalize.less there is the table reset which include border-collapse:collapse. This was not in the 2.x of Bootstrap. Because of this new reset, there are no rounded corners as those have to be border-collapse:separate. You have to make a separate class and set it up accordingly.
<table class="table table-curved">
Only works with "table-hover" and "table-striped" NOT table-bordered. The borders are included in this style.
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
border-left:0px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved th {
border-top: none;
}
.table-curved th:first-child {
border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
border-radius: 0 0 6px 0;
}
LESS
// Added Rounded Corner Tables
.table-curved {
border-collapse: separate;
border: solid @table-border-color 1px;
border-radius: @table-radius;
border-left:0px;
td, th {
border-left: 1px solid @table-border-color;
border-top: 1px solid @table-border-color;
}
th {
border-top: none;
}
th:first-child {
border-radius: @table-radius 0 0 0;
}
th:last-child {
border-radius: 0 @table-radius 0 0;
}
th:only-child{
border-radius: @table-radius @table-radius 0 0;
}
tr:last-child td:first-child {
border-radius: 0 0 0 @table-radius;
}
tr:last-child td:last-child {
border-radius: 0 0 @table-radius 0;
}
}