Rounded tables in Twitter Bootstrap 3

CssTwitter Bootstrap-3Html TableRounded Corners

Css Problem Overview

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>

Css Solutions

Solution 1 - Css

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>

Solution 2 - Css

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

Solution 3 - Css

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

Solution 4 - Css

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.

Solution 5 - Css

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.

Solution 6 - Css

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

Solution 7 - Css

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

Solution 8 - Css

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

Solution 9 - Css

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

Solution 10 - Css

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

Solution 11 - Css

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>
Categories
Recommended Css Solutions
Recommended Twitter Bootstrap-3 Solutions
Recommended Html Table Solutions
Recommended Rounded Corners Solutions

Previous Solution:

ubuntu "No space left on device" but there is tons of space

LinuxUbuntu

Next Solution:

MySql Error: 1364 Field 'display_name' doesn't have default value

PhpMysql

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPhillippe SantanaView Question on Stackoverflow
Solution 1 - CssCarsten HessView Answer on Stackoverflow
Solution 2 - CssChristinaView Answer on Stackoverflow
Solution 3 - CssAlen OblakView Answer on Stackoverflow
Solution 4 - CssJoakim Poromaa HelgerView Answer on Stackoverflow
Solution 5 - CssAntti Haapala -- Слава УкраїніView Answer on Stackoverflow
Solution 6 - CssRuben StolkView Answer on Stackoverflow
Solution 7 - CssJames ByrneView Answer on Stackoverflow
Solution 8 - CssMathias DeweldeView Answer on Stackoverflow
Solution 9 - Cssasgeo1View Answer on Stackoverflow
Solution 10 - CssYanAlexView Answer on Stackoverflow
Solution 11 - Cssdignitas123View Answer on Stackoverflow