提问者:小点点

无条带/边框的引导表


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

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


共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

匿名用户

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