引导表无条纹/边框

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

所以在这里，我想要的只是内部边界。

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

与其余类似，但更具体：

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

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

对于基本样式（浅色填充和仅水平分隔线），将基类添加.table到any <table>。看起来似乎是多余的，但是鉴于表格在其他插件（如日历和日期选择器）中的广泛使用，我们选择隔离自定义表格样式。

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

<table class='table table-borderless'>

在我的CSS中：

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

在我的指令中：

<table class='table borderless'>
    <tr class='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'>仅使用具有该类的特定表时，将带有边框，而不是树中的任何表。

试试这个：

<table class='borderless'>

的CSS

.borderless {
 border:none;
}

注意：您之前所做的操作无法正常工作，因为您的css代码针对的是.borderless表（可能不存在）中的表

我知道这是一个老话题，您已经选择了一个答案，但是我认为我应该发布此答案，因为它与当前正在寻找的其他任何人有关。

没有理由创建新的CSS规则，只需撤销当前规则，边框就会消失。

    .table> tbody> tr> th，
    .table> tbody> tr> td {
        border-top：0;
    }

展望未来，任何带有

    。表

将没有边框。

使用border-Boostrap 4中的课程

<td class="border-0"></td>

要么

<table class='table border-0'></table>

确保以您要做的最后更改结束类输入。

这个为我工作。

<td style="border-top: none;">;

关键是您需要将border-top添加到 <td>

我在这里玩游戏迟到了，但FWIW：添加.table-bordered到Just .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>

使用hidden代替none：

.hide-bottom {
    border-bottom-style: hidden;
}

大多数示例似乎过于具体和/或过大。

这是我使用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），所以到这里结束了。

在某些情况下，还必须在表类中使用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>

通过此链接获取参考