我有点卡住了CSS的问题,而使用Bootstrap。我也使用Angular JS和Angular UI。引导(这可能是问题的一部分)。

我正在做一个以表格形式显示数据的网站。 有时,数据包含我必须在表中显示的对象。 我想把无界表放到普通表中,同时为无界表保留分隔线。

但似乎即使我明确地说不要在表格上显示边界,它也是被迫的:

HTML:

<table class='table borderless'>

CSS:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

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


当前回答

从Bootstrap v4.1开始,你可以在你的表中添加无边界表,请参阅官方文档:

<table class='table table-borderless'>

其他回答

我像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类添加到<table>标记中。从Bootstrap文档中的表:

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

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

试试这个:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

注意:你之前所做的并没有工作,因为你的css代码的目标是你的.borderless表(可能不存在)中的一个表。

这个方法对我很管用。

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

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