Bootstrap表没有条纹/边框
我在使用Bootstrap的时候遇到了一个CSS问题。 我也使用Angular JS与Angular UI.bootstrap（这可能是问题的一部分）。
我正在做一个网站，显示在一个表中的数据。 有时，数据包含我必须在表格中显示的对象。 所以我想把无边界的表格放在一个普通的表格中，同时保持无边界表格的分隔线。
但是，即使我专门说不把桌面上的边框显示出来，也是被迫的：
HTML：
<table class='table borderless'> CSS：
.borderless table { border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none; }
所以在这里，我想要的只是内部边界。
边框样式设置在td元素上。
HTML：
<table class='table borderless'>
CSS：
.borderless td, .borderless th { border: none; }
使用Bootstrap 3.2.0我有Brett Henderson解决scheme的问题（边界总在那里），所以我改进了它：
HTML
<table class="table table-borderless">
CSS
.table-borderless > tbody > tr > td, .table-borderless > tbody > tr > th, .table-borderless > tfoot > tr > td, .table-borderless > tfoot > tr > th, .table-borderless > thead > tr > td, .table-borderless > thead > tr > th { border: none; }
类似于其他的，但更具体的：
table.borderless td,table.borderless th{ border: none !important; }
不要将.table类添加到<table>标记中。 从表上的Bootstrap文档：
对于基本的样式 – 轻填充和仅水平分隔
.table将基类.table添加到任何<table>。 它看起来可能超级冗余，但考虑到其他插件（如日历和dateselect器）广泛使用表格，我们select隔离我们的自定义表格样式。
在我的CSS：
.borderless tr td { border: none !important; padding: 0px !important; }
在我的指令中：
<table class='table borderless'> <tr class='borderless' ....>
我没有把td元素的“无边界”。
经过testing，它的工作！ 所有的边界和填充都完全剥离。
我像Davide Pastore那样扩展了Bootstrap表格样式，但是用这种方法样式也适用于所有的子表格，并且它们不适用于页脚。
更好的解决scheme是模仿核心Bootstrap表格样式，但是用新的类：
.table-borderless>thead>tr>th .table-borderless>thead>tr>td .table-borderless>tbody>tr>th .table-borderless>tbody>tr>td .table-borderless>tfoot>tr>th .table-borderless>tfoot>tr>td { border: none; }
那么当你使用<table class='table table-borderless'>只有具有该类的特定表格才会有边界，而不是树中的任何表格。
尝试这个：
<table class='borderless'>
CSS
.borderless { border:none; }
注意：你之前做的工作没有成功，因为你的css代码是在你的.borderless表中（这可能不存在）
这个为我工作。
<td style="border-top: none;">;
关键是你需要添加border-top到<td>
我知道这是一个古老的线程，你已经select了一个答案，但我想我会发布这个，因为它是目前正在寻找的任何其他人。
没有理由创build新的CSS规则，只需撤消当前的规则，边界就会消失。
。表> TBODY> TR>日
.table> tbody> tr> td {
border-top：0;
}
前进，任何风格的
。表
将显示没有边界。
我在这里比赛迟到，但FWIW：添加.table-bordered到一个.table只是用边框包起来，尽pipe每个单元格都加了一个完整的边框。
但是删除.table-bordered仍然留下规则行。 这是一个语义问题，但与BS3 +术语保持一致，我使用了这组覆盖：
.table.table-unruled>tbody>tr>td, .table.table-unruled>tbody>tr>th { border-top: 0 none transparent; border-bottom: 0 none transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-xs-5"> .table <table class="table"> <thead> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </thead> <tbody> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tbody> <tfoot> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </tfoot> </table> </div> <div class="col-xs-5 col-xs-offset-1"> <table class="table table-bordered"> .table .table-bordered <thead> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </thead> <tbody> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tbody> <tfoot> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </tfoot> </table> </div> </div> <div class="row"> <div class="col-xs-5"> <table class="table table-unruled"> .table .table-unruled <thead> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </thead> <tbody> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tbody> <tfoot> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </tfoot> </table> </div> <div class="col-xs-5 col-xs-offset-1"> <table class="table table-bordered table-unruled"> .table .table-bordered .table-unruled <thead> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </thead> <tbody> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tbody> <tfoot> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </tfoot> </table> </div> </div> </div>
使用hidden而不是none ：
.hide-bottom { border-bottom-style: hidden; }
