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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With