twitter-bootstrap 如何将边框半径应用于 Bootstrap 3 的表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20917676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I apply a border radius to Bootstrap 3's tables?
提问by TIMEX
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.
我怎样才能做到这一点？现在，Bootstrap 3 表的半径为 0。
回答by Anup
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;
}
回答by Iman Sedighi
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.
注意：panel-default 会添加一个 1px 的灰色边框。如果你想隐藏它，只需添加边框颜色：白色；面板默认样式。
