Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 785
Phillippe Santana Avatar asked Sep 10 '13 22:09

Phillippe Santana


1 Answers

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> 
like image 83
Carsten Hess Avatar answered Sep 18 '22 11:09

Carsten Hess