没有条纹/边框的Bootstrap表

Question

我在使用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;
}

所以在这里,我想要的只是内部边界.

Answer 1

使用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;
}

Answer 2

边框样式设置在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

Answer 3

与其他类似,但更具体:

    table.borderless td,table.borderless th{
     border: none !important;
}

Answer 4

不要将.table类添加到<table>标记中.从表上的Bootstrap文档:

对于基本样式 - 轻型填充和仅水平分隔 -将基类添加.table到任何基础<table>.它可能看起来超级冗余,但考虑到其他插件(如日历和日期选择器)的广泛使用,我们选择隔离自定义表格样式.

Answer 5

从Bootstrap v4.1开始,您可以添加table-borderless到您的表中,请参阅官方文档:

<table class='table table-borderless'>

Answer 6

使用 npm 或 cdn 链接安装 bootstrap

<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>

通过此链接获取参考

Answer 7

在我的CSS中:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

在我的指令中:

<table class='table borderless'>
    <tr class='borderless' ....>

我没有为td元素添加'无边界'.

经过测试,确实有效!所有边框和衬垫都被完全剥离.

Answer 8

我像 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'>只使用带有类的特定表时，树中的任何表都不会被加边框。