没有条纹/边框的引导表

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

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

当前回答

在我的CSS:

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

在我的指示中:

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

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

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

其他回答

使用Boostrap 4中的border类

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

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

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

不要将.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.borderless td,table.borderless th{
     border: none !important;
}

推荐文章