我有点卡住了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;
}
这里，我想要的只是内部边界。
当前回答
使用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>
使用此链接获取参考
其他回答
我知道这是一个旧的帖子，你已经选择了一个答案，但我想我张贴这个，因为它与目前正在寻找的任何人相关。
没有理由创建新的CSS规则，只要撤销当前的规则，边界就会消失。
.table>tbody>tr>th,
.table>tbody>tr>td {
border-top: 0;
}
未来，任何有风格的东西
.table
将没有边界。
在我的CSS:
.borderless tr td {
border: none !important;
padding: 0px !important;
}
在我的指示中:
<table class='table borderless'>
<tr class='borderless' ....>
我没有把'borderless'放在td元素上。
测试并成功了! 所有的边框和衬垫都被完全剥离。
使用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;
}
我的解决方案是:
<table width=“100%”边框=“0”> < tr排列=‘中心’> < td > Data1 < / td > < td > < / td >数据 < / tr > - < table >
这个方法对我很管用。
<td style="border-top: none;">;
关键是你需要添加border-top到<td>
