How do I apply a border radius to Bootstrap 3's tables?

I want the top corners and bottom corners of a table to have rounded corners.

How can I do this? Right now, the Bootstrap 3 tables have 0 radius.

Answers


Try this :-

<table class="table table-curved">
    ....
</table>    

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

The easiest way is wrap the table with a panel. Then your table will have rounded corners automatically.

Example:

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

Note: panel-default will add a 1px grey border. if you want to hide it just add border-color:white; to style of panel-default.


Need Your Help

ASP.NET MVC route

asp.net-mvc asp.net-mvc-4 routes

I have only default route enabled:

Develop in Visual Studio; run and debug on remote linux target

c# visual-studio debugging mono

I am writing a program in c# in Visual Studio, which runs on a linux target (Raspberry Pi) under the mono framework.