我有点卡住了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;
}

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


当前回答

这个方法对我很管用。

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

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

其他回答

在我的CSS:

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

在我的指示中:

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

我没有把'borderless'放在td元素上。

测试并成功了! 所有的边框和衬垫都被完全剥离。

这个方法对我很管用。

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

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

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

使用Boostrap 4中的border类

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

or

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

请确保在类输入结束时使用您想要执行的最后一个更改。

在某些情况下,还必须在表类中使用border-spacing,例如:

Border-spacing: 0 !