Bootstrap 3 的部分边框 table

Question

使用 <table class="table table-bordered"> 将创建一个全边框的 table。但是我想要一个 table 带有外边框和行之间的边框。列之间不应有边框。

我可以用<table class="table" style="border:1px solid #ddd">解决这个问题。但我想知道，是否有正确的 bootstrap 样式 class 可以做到这一点。

更新 #1：似乎 BS3 没有提供原生样式来做到这一点，我已经创建了一个对 BS3 项目的拉取请求。 https://github.com/twbs/bootstrap/pull/15790

Answer 1

bootstrap 中没有任何内容专门用于添加边框。为了它的价值，我为我的应用程序创建了边框助手。 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-t = 顶部边框
.border-l = 左侧边框
.border-r = 右侧边框
.border-tb = 上下边框
.border-lr = 左右边框
.border-all = 所有边的边框

HTH,

-泰德

Answer 2

您可以使用自己的 class 扩展 bootstrap:

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

CSS:

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

Bootstrap 3 的部分边框 table

Partially bordered table of Bootstrap 3

css

twitter-bootstrap

twitter-bootstrap-3