Rounded tables in Twitter Bootstrap 3 - css

Question

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>
Agennda
</td>
<td>
2,876
</td>
<td>
$ 80.67
</td>
<td>
Edit
</td>
</tr>
</tbody>
</table>

Answer 1

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>

Answer 2

"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;
}
}

Answer 3

Using Christina's answer and this thread , i came up with this CSS to get the rounded corners in tables with or without THEAD.
.table-curved {
border-collapse: separate;
border: solid #ccc 1px;
border-radius: 6px;
border-left: 0px;
border-top: 0px;
}
.table-curved > thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #ccc 1px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved > :first-child > :first-child > :first-child {
border-radius: 6px 0 0 0;
}
.table-curved > :first-child > :first-child > :last-child {
border-radius: 0 6px 0 0;
}
.table-curved > :last-child > :last-child > :first-child {
border-radius: 0 0 0 6px;
}
.table-curved > :last-child > :last-child > :last-child {
border-radius: 0 0 6px 0;
}

Answer 4

I assume you are not using the source less-files. However, in normalize.less, bootstrap 3.0RC is adding:
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
This border-collapse thing destroys the rounded borders on tables.
So, by simply override that in your table-bordered you turn on the effect:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: inherit;
}
I think it may work.

Answer 5

The following one works quite nicely for me:
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved tr > *:first-child {
border-left: 0px;
}
.table-curved tr:first-child > * {
border-top: 0px;
}
Though it does not of course work for nested tables.

Answer 6

For the sake of bootstrappiness:
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #border-radius-base;
border-left: 0px;
border-top: 0px;
> thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #table-border-color 1px;
}
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
> :first-child > :first-child > :first-child {
border-radius: #border-radius-base 0 0 0;
}
> :first-child > :first-child > :last-child {
border-radius: 0 #border-radius-base 0 0;
}
> :last-child > :last-child > :first-child {
border-radius: 0 0 0 #border-radius-base;
}
> :last-child > :last-child > :last-child {
border-radius: 0 0 #border-radius-base 0;
}
}

Answer 7

This is another solution that may be far simpler than the above ones. This will select the first and last th elements and apply a border to their respective corners. You can then add a radius to the overall table.
.table {
border-radius: 5px;
}
th:first-of-type {
border-top-left-radius: 5px;
}
th:last-of-type {
border-top-right-radius: 5px;
}

Answer 8

If you have only 1 cell in the first row or last row this one will work.
(Added a fix to the code of: Ruben Stolk)
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #border-radius-base;
border-left: 0px;
border-top: 0px;
> thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #table-border-color 1px;
}
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
> :first-child > :first-child > :first-child {
border-radius: #border-radius-base 0 0 0;
}
> :first-child > :first-child > :last-child {
border-radius: 0 #border-radius-base 0 0;
}
> :first-child > :first-child > :only-child{
border-radius: #border-radius-base #border-radius-base 0 0;
}
> :last-child > :last-child > :first-child {
border-radius: 0 0 0 #border-radius-base;
}
> :last-child > :last-child > :last-child {
border-radius: 0 0 #border-radius-base 0;
}
> :last-child > :last-child > :only-child{
border-radius: 0 0 #border-radius-base #border-radius-base;
}
}

Answer 9

The answer above on wrapping the table with a panel (<div class="panel panel-default">) seems to work the best.
However, as mentioned in the comments, you do need to remove the top border on the table.
I used this SCSS to do this, so thought I would share:
// remove extra top border on tables wrapped in a panel
.panel {
& > .table-responsive > .table.table-bordered, & > .table.table-bordered {
& > tbody:first-child, & > thead:first-child {
& > tr:first-child {
td, th {
border-top: none;
}
}
}
}
}

Answer 10

Use table-bordered-curved instead table-bordered
.table-bordered-curved {
border-radius: 4px;
border-collapse: separate;
border: solid 1px #ccc;
}
.table-bordered-curved thead tr:last-child th,
.table-bordered-curved thead tr:last-child td {
border-bottom: solid 1px #ccc;
}
.table-bordered-curved thead tr th,
.table-bordered-curved thead tr td {
border-bottom: 0;
border-right: solid 1px #ccc;
}
.table-bordered-curved thead tr th:last-child,
.table-bordered-curved thead tr td:last-child {
border-right: 0;
}
.table-bordered-curved tbody tr:first-child th,
.table-bordered-curved tbody tr:first-child td {
border-top: 0;
}
.table-bordered-curved tbody tr td {
border-right: solid 1px #ccc;
}
.table-bordered-curved tbody tr td:last-child {
border-right: 0;
}

Answer 11

This was the only solution that worked for me in Bootstrap 4. The card class only put a background behind my table.
<table class="table table-dark table-striped">
<thead>
<tr>
<th class="rounded-top" scope="col" colspan="3">Perofrmance</th>
</tr>
</thead>
<thead>
<tr>
<th scope="col">Strategy</th>
<th scope="col">YTD</th>
<th scope="col">Max DD</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">BTCUSD:</th>
<td>
<b>15</b>%
</td>
<td>
<b>20</b>%
</td>
</tr>
<tr style="border-bottom: transparent;">
<th scope="row" style="border-bottom-left-radius: .25rem!important;">ETHUSD:
</th>
<td>
<b>12.6</b>%
</td>
<td style="border-bottom-right-radius: .25rem!important;">
<b id="valueETHDD">0</b>%
</td>
</tr>
</tbody>
</table>