我有点卡住了CSS的问题，而使用Bootstrap。我也使用Angular JS和Angular UI。引导(这可能是问题的一部分)。
我正在做一个以表格形式显示数据的网站。 有时，数据包含我必须在表中显示的对象。 我想把无界表放到普通表中，同时为无界表保留分隔线。
但似乎即使我明确地说不要在表格上显示边界，它也是被迫的:
HTML:
<table class='table borderless'>
CSS:
.borderless table {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
这里，我想要的只是内部边界。
试试这个:
<table class='borderless'>
CSS
.borderless {
border:none;
}
注意:你之前所做的并没有工作，因为你的css代码的目标是你的.borderless表(可能不存在)中的一个表。
不要将.table类添加到<table>标记中。从Bootstrap文档中的表:
对于基本样式—轻填充和仅水平分隔—将基类.table添加到任何<table>。这看起来可能非常多余，但考虑到其他插件(如日历和日期选择器)广泛使用表格，我们选择隔离我们的自定义表格样式。
边界样式设置在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
使用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;
}
在我的CSS:
.borderless tr td {
border: none !important;
padding: 0px !important;
}
在我的指示中:
<table class='table borderless'>
<tr class='borderless' ....>
我没有把'borderless'放在td元素上。
测试并成功了! 所有的边框和衬垫都被完全剥离。
我像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'>时，只有具有该类的特定表才会被边框，而不是树中的任何表。
我知道这是一个旧的帖子，你已经选择了一个答案，但我想我张贴这个，因为它与目前正在寻找的任何人相关。
没有理由创建新的CSS规则，只要撤销当前的规则，边界就会消失。
.table>tbody>tr>th,
.table>tbody>tr>td {
border-top: 0;
}
未来，任何有风格的东西
.table
将没有边界。
我在这里玩的很晚，但是FWIW:将.table-bordered添加到.table中只是用边框包装了表，尽管是通过为每个单元格添加完整的边框。
但是删除.table边界仍然保留规则行。这是一个语义问题，但为了与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>
使用Boostrap 4中的border类
<td class="border-0"></td>
or
<table class='table border-0'></table>
请确保在类输入结束时使用您想要执行的最后一个更改。
从Bootstrap v4.1开始，你可以在你的表中添加无边界表，请参阅官方文档:
<table class='table table-borderless'>
使用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>
使用此链接获取参考
Bootstrap支持scss，他有一个特殊的变量。如果这是一种情况，那么你可以添加你的主要变量。scss文件
$table-border-width: 0;
更多信息请点击这里https://github.com/twbs/bootstrap/blob/6ffb0b48e455430f8a5359ed689ad64c1143fac2/scss/_variables.scss#L347-L380
我的解决方案是:
<table width=“100%”边框=“0”> < tr排列=‘中心’> < td > Data1 < / td > < td > < / td >数据 < / tr > - < table >
