如何将边界半径应用于Bootstrap 3的表？

Question

我希望桌子的顶角和底角有圆角.

我怎样才能做到这一点？现在,Bootstrap 3表的半径为0.

Answer 1

试试这个 :-

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

Answer 2

最简单的方法是用面板包裹桌子.然后你的桌子会自动圆角.

例:

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

注意:panel-default将添加1px灰色边框.如果你想隐藏它只需添加border-color:white; 到面板样式 - 默认.