没有条纹/边框的 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;
}

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

原文由 Romain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Brett Henderson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Davide Pastore 发布，翻译遵循 CC BY-SA 3.0 许可协议