Question

使用<table class="table table-bordered">将创建一个完全镶边的表格。但是我希望有一个带有外边框和行之间边框的表格。列之间不应该有边框。

我可以使用<table class="table" style="border:1px solid #ddd">解决此问题。但是我想知道，如果有正确的引导样式类来做这件事。

更新＃1 ：由于BS3似乎没有提供原生样式，我已经为BS3项目创建了拉取请求。 https://github.com/twbs/bootstrap/pull/15790

Answer 1

您可以使用自己的类扩展引导程序：

<table class="table table-bordered table-bordered-rows">

CSS：

.table-bordered-rows td + td { border-left: none }

Answer 2

引导程序中没有任何内容可以专门添加边框。为了它的价值，我为我的应用程序创建了边境助手。 CSS就像这样：

/* generic border helpers */
.border-b,.border-t,.border-l,.border-r,.border-tb,.border-lr,.border-all{border-style:solid;border-color:#dddddd; border-width:0;}
.border-t,.border-tb,.border-all{border-top-width:1px;}
.border-b,.border-tb,.border-all{border-bottom-width:1px;}
.border-l,.border-lr,.border-all{border-left-width:1px;}
.border-r,.border-lr,.border-all{border-right-width:1px;}

.border-b = border bottom side
.border -t = border top side
.border -l = border left side
.border-r = border right side
.border-tb =边界顶部和底部
.border-lr =边界左右两侧
.border-all = border all sides

HTH，

-Ted

部分边界的Bootstrap 3表

2 个答案: