没有条纹/边框的引导表

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

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

当前回答

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

Border-spacing: 0 !

其他回答

这个方法对我很管用。

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

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

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

$table-border-width: 0;

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

不要将.table类添加到<table>标记中。从Bootstrap文档中的表:

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

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

<table class='table table-borderless'>

使用hidden代替none:

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

推荐文章