我有点卡住了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类添加到<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
使用hidden代替none:
.hide-bottom {
border-bottom-style: hidden;
}
使用Boostrap 4中的border类
<td class="border-0"></td>
or
<table class='table border-0'></table>
请确保在类输入结束时使用您想要执行的最后一个更改。
在某些情况下，还必须在表类中使用border-spacing，例如:
Border-spacing: 0 !
使用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>
使用此链接获取参考
