Rounded tables on Twitter Bootstrap 3

Question

Bootstrap 3 dropped rounded corners on tables. What styles should I apply to return them when I apply the .table-bordered , please?

UPDATE

So far, I came to this code without 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> 

Answer 1

If you surround the table with a panel, you get rounded corners.

Like this:

 <div class="panel panel-default"> <table class="table table-bordered"> .... </table> </div> 

Answer 2

"table-responsive" goes to the div that wraps the table, not the table.

There is a reset table in normalize.less that includes crash collapse: crash. This was not in 2.x Bootstrap. Because of this new reset, there are no rounded corners, as they should be short-lived: separate. You must make a separate class and configure it accordingly.

  <table class="table table-curved"> 

Works only with tabular guidance and with strip without a table. 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; } 

SMALLER

  // 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 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 that you are not using smaller source files. However, in normalize.less, bootstrap 3.0RC adds:

 // ========================================================================== // Tables // ========================================================================== // // Remove most spacing between table cells. // table { border-collapse: collapse; border-spacing: 0; } 

This collapse thing destroys the rounded borders of tables. So, just overriding this in your boundary table will enable the effect:

 .table-bordered { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border-collapse: inherit; } 

I think that might work.

Answer 5

For loading:

 .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 6

The following work is very pleasant 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; } 

Although this, of course, does not work for nested tables.

Answer 7

If you have only 1 cell in the first row or the last row, this will work.

(Added code fix: 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 8

The answer above on wrapping a table using a panel ( <div class="panel panel-default"> ) seems to work best.

However, as mentioned in the comments, you need to remove the top border of the table.

I used this SCSS for this, so I 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 9

This is another solution that can be much simpler than the previous ones. This will select the first and last elements of th and apply the border to the corresponding corners. Then you can add the 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 10

Use with rounded columns instead of with a table

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