Bootstrap table。如何去除 table 的所有边框？

Question

如何从 bootstrap table 中删除所有边框（尤其是外边框）？这是一个没有内部边框的 table:

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 样式才能删除所有边框？

Answer 1

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

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

Answer 2

将 border 中的 CSS 大小更改为 .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/

Answer 3

在这种情况下，您需要将边框 设置在 table 下方和边框 周围 - table header, table data, table container 全部为 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>

Answer 4

您需要将 border: none !important; 设置为 .fixed-table-container 和 .table。同时将 border-bottom: none !important; 设置为您的第一条规则 .table th, .table td.
已更新 Fiddle：http://jsfiddle.net/sba7wkvb/5/

Answer 5

试试这个：

.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;
}

Demo JSFiddle

Answer 6

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

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

Answer 7

很简单，请在您的 CSS sheet.It 中添加以下代码将删除 table

中的所有边框

.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;
}

希望有所帮助。

Answer 8

如果您正在使用 CSS3 这将帮助您：

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

Answer 9

html

<table class="table noborder">

css

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

Answer 10

使用Bootstrap 在 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

Answer 11

如果您正在使用 bootstrap 这将帮助您：

<table class="table table-borderless">

Bootstrap table。如何去除 table 的所有边框？

Bootstrap table. How to remove all borders from table?

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-table