css - 引导表。如何从表格中删除所有边框？

Question

如何从引导表中删除所有（尤其是外部）边框？这是一个没有内边框的表格：

HTML

<style>
    .table th, .table td { 
        border-top: none !important;
        border-left: none !important;
    }
</style>
<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <br/>
        <table data-toggle="table" data-striped="true">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td>F</td>
            </tr>
            </tbody>
        </table>
    </div>    
    <div class="col-xs-1"></div>
</row>

http://jsfiddle.net/sba7wkvb/1/

需要覆盖哪些 CSS 样式才能删除所有边框？

score 24 · Accepted Answer

在这种情况下，您需要将表格下方的边框和周围的边框- 表格标题r，表格数据，表格容器全部设置为 0px 以完全摆脱所有边框。

.table {
    border-bottom:0px !important;
}
.table th, .table td {
    border: 1px !important;
}
.fixed-table-container {
    border:0px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>

<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <br/>
        <table data-toggle="table" data-striped="true">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td>F</td>
            </tr>
            </tbody>
        </table>
    </div>    
    <div class="col-xs-1"></div>

score 4 · Accepted Answer

您可以将classes选项设置为table table-no-bordered，例如：http: //issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html。

编辑：此功能仅在开发版本（v1.7.0之后）中支持：https ://github.com/wenzhixin/bootstrap-table/tree/master/src 。

score 3 · Accepted Answer

试试这个：

.table th, .table td {
    border-top: none !important;
    border-left: none !important;
}
.fixed-table-container {
    border:0px;
}
.table th {
    border-bottom: none !important;
}
.table:last-child{
  border:none !important;
}

演示 JSFiddle

score 3 · Accepted Answer

3

如果您使用的是引导程序，这将帮助您：

<table class="table table-borderless">

于 2018-05-03T04:15:59.710 回答

score 2 · Accepted Answer

更改borderCSS 中的大小.fixed-table-container

CSS：

.table th, .table td {
    border-top: none !important;
    border-left: none !important;
}
.fixed-table-container {
    border:0px;
}

http://jsfiddle.net/sba7wkvb/3/

score 2 · Accepted Answer

html

<table class="table noborder">

css

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

score 2 · Accepted Answer

在 html 中使用引导程序

<table class="table no-border">

在 CSS 中

.table.no-border tr td, .table.no-border tr th {
    border-width: 0;
}

来源：https ://codepen.io/netsi1964/pen/ogVQqG

score 1 · Accepted Answer

要删除外边框，您应该删除边框，.fixed-table-container如下所示：

.fixed-table-container{border: 0px;}

score 0 · Accepted Answer

您需要设置border: none !important;为.fixed-table-container 和 .table。也设置border-bottom: none !important;为您的第一条规则，.table th, .table td.
更新小提琴：http: //jsfiddle.net/sba7wkvb/5/

score 0 · Accepted Answer

很简单，请在您的 CSS 表中添加以下代码。它将删除表格中的所有边框

.table th, .table td, .table {
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
}
.fixed-table-container {
    border:0px;
    border-bottom: none !important;
}

希望有所帮助。

score 0 · Accepted Answer

如果您使用的是 CSS3，这将帮助您：

.table tbody tr td, .table tbody tr th {
    border: none;
}

css - 引导表。如何从表格中删除所有边框？

11 回答 11

Related

Reference