我有点卡住了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规则,只要撤销当前的规则,边界就会消失。


    .table>tbody>tr>th,
    .table>tbody>tr>td {
        border-top: 0;
    }

未来,任何有风格的东西

    .table

将没有边界。

其他回答

我的解决方案是:

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

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

<table class='table table-borderless'>

与其他相似,但更具体:

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

我知道这是一个旧的帖子,你已经选择了一个答案,但我想我张贴这个,因为它与目前正在寻找的任何人相关。

没有理由创建新的CSS规则,只要撤销当前的规则,边界就会消失。


    .table>tbody>tr>th,
    .table>tbody>tr>td {
        border-top: 0;
    }

未来,任何有风格的东西

    .table

将没有边界。