我在使用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;
}
所以在这里，我想要的只是内部边界。
答案 0 :(得分：322)
使用Bootstrap 3.2.0我遇到了Brett Henderson解决方案的问题（边界始终存在），所以我改进了它：
<强> 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;
}
答案 1 :(得分：247)
边框样式设置在td元素上。
HTML：
<table class='table borderless'>
的CSS：
.borderless td, .borderless th {
border: none;
}
更新：自Bootstrap 4.1起，您可以使用.table-borderless删除边框。
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
答案 2 :(得分：24)
与其他类似，但更具体：
table.borderless td,table.borderless th{
border: none !important;
}
答案 3 :(得分：17)
请勿将.table课程添加到您的<table>代码中。来自tables上的Bootstrap文档：
对于基本样式 - 浅色填充和仅水平分隔 - 将基类
.table添加到任何<table>。这可能看起来超级冗余，但鉴于表格广泛用于其他插件，如日历和日期选择器，我们选择隔离我们的自定义表格样式。
答案 4 :(得分：6)
自Bootstrap v4.1起，您可以在表格中添加table-borderless，请参阅official documentation：
<table class='table table-borderless'>
答案 5 :(得分：5)
在我的CSS中：
.borderless tr td {
border: none !important;
padding: 0px !important;
}
在我的指令中：
<table class='table borderless'>
<tr class='borderless' ....>
我没有把无国界的＆＃39;对于td元素。
经过测试，确实有效！ 所有边框和填充都被完全剥离。
答案 6 :(得分：4)
我像Davide Pastore那样扩展了Bootstrap表样式，但是使用该方法，样式也应用于所有子表，并且它们不适用于页脚。
更好的解决方案是模仿核心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'>时，只有特定的表与该类接壤，而不是树中的任何表。
答案 7 :(得分：3)
我知道这是一个老线程，你已经选择了一个答案，但我想我会发布这个，因为它与目前正在寻找的其他人有关。
没有理由创建新的CSS规则，只需撤消当前规则，边框就会消失。
.table>tbody>tr>th,
.table>tbody>tr>td {
border-top: 0;
}
前进，任何用
设计的东西.table
将无法显示边框。
答案 8 :(得分：3)
试试这个：
<table class='borderless'>
.borderless {
border:none;
}
注意：之前您正在做的事情不起作用，因为您的css代码针对的是.borderless表中的表（可能不存在）
答案 9 :(得分：2)
使用Boostrap 4中的border-类
<td class="border-0"></td>
或
<table class='table border-0'></table>
请务必使用您要执行的上一次更改结束课程输入。
答案 10 :(得分：2)
在某些情况下，还必须在表类中使用边框间距，例如：
边界间距：0！重要；
答案 11 :(得分：1)
我在这里比赛迟到了，但是FWIW：将.table-bordered添加到.table只是用边框包裹桌子，虽然为每个单元格添加了一个完整的边框。
但删除.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="https://maxcdn.bootstrapcdn.com/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>
答案 12 :(得分：1)
使用hidden代替none：
.hide-bottom {
border-bottom-style: hidden;
}
答案 13 :(得分：1)
使用npm或cdn链接安装引导程序
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
使用此link
获取参考答案 14 :(得分：0)
大多数示例似乎过于具体和/或肿。
这是我使用Bootstrap 4.0.0（4.1包含.table-borderless但仍为alpha）精简的解决方案...
.table-borderless th{border:0;}
.table-borderless td{border:0;}
与许多建议的解决方案相似，但字节数最少
注意：最终到这里是因为我正在查看BS4.1参考，并且无法弄清楚为什么.table-borderless不能与我的4.0源一起工作（例如：operator error，duh）
答案 15 :(得分：0)
Bootstrap 支持 scss，他有一个特殊的变量。如果是这种情况，那么您可以在主 variables.scss 文件中添加
$table-border-width: 0;
答案 16 :(得分：-1)
这个对我有用。
<td style="border-top: none;">;
关键是您需要在<td>