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

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


当前回答

与其他相似,但更具体:

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

其他回答

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

Border-spacing: 0 !

使用hidden代替none:

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

我像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 width=“100%”边框=“0”> < tr排列=‘中心’> < td > Data1 < / td > < td > < / td >数据 < / tr > - < table >

Bootstrap支持scss,他有一个特殊的变量。如果这是一种情况,那么你可以添加你的主要变量。scss文件

$table-border-width: 0;

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