html - 没有条纹/边框的引导表

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

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

score 355 · Accepted Answer

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

score 328 · Accepted Answer

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

score 26 · Accepted Answer

与其他类似，但更具体：

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

score 20 · Accepted Answer

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

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

score 12 · Accepted Answer

自 Bootstrap v4.1 起，您可以将其添加table-borderless到您的表格中，请参阅官方文档：

<table class='table table-borderless'>

score 6 · Accepted Answer

在我的 CSS 中：

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

在我的指令中：

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

我没有为 td 元素添加“无边界”。

经过测试，它有效！所有边框和填充都被完全剥离。

score 5 · Accepted Answer

我像 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'>仅使用带有类的特定表时，将有边框，而不是树中的任何表。

score 4 · Accepted Answer

试试这个：

<table class='borderless'>

CSS

.borderless {
 border:none;
}

注意：您之前所做的事情不起作用，因为您的 css 代码针对的是 .borderless 表中的一个表（可能不存在）

score 4 · Accepted Answer

我知道这是一个旧线程并且您已经选择了一个答案，但我想我会发布这个，因为它与当前正在寻找的其他任何人相关。

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

    .table>tbody>tr>th,
    .table>tbody>tr>td {
        边界顶部：0；
    }

未来，任何风格的东西

    。桌子

将不显示边界。

score 3 · Accepted Answer

3

使用hidden代替none：

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

于 2017-09-04T13:04:41.193 回答

score 3 · Accepted Answer

使用border-Boostrap 4 中的类

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

或者

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

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

score 3 · Accepted Answer

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

通过此链接获取参考

score 2 · Accepted Answer

这个对我有用。

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

这是我使用 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 源（例如：操作员错误，duh）

score 2 · Accepted Answer

在某些情况下，还必须在表格类中使用边框间距，例如：

边框间距：0！重要；

score 0 · Accepted Answer

Bootstrap 支持 scss，而且他有一个特殊的变量。如果是这种情况，那么您可以在您的主要 variables.scss 文件中添加

$table-border-width: 0;

更多信息在这里https://github.com/twbs/bootstrap/blob/6ffb0b48e455430f8a5359ed689ad64c1143fac2/scss/_variables.scss#L347-L380

html - 没有条纹/边框的引导表

17 回答 17

CSS

Related

Reference