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

【问题标题】：Bootstrap table. How to remove all borders from table?引导表。如何从表格中删除所有边框？
【发布时间】：2015-07-04 15:20:05
【问题描述】：

如何从bootstrap 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 样式才能移除所有边框？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-table

【解决方案1】：

在这种情况下，您需要设置边框表格下方和边框周围 - 表格标题r、表格数据、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>

【讨论】：

【解决方案2】：

您可以将classes选项设置为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。

【讨论】：

它可以工作，但仍然出现两条水平边界线 - link。

【解决方案3】：

试试这个：

.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

【讨论】：

【解决方案4】：

如果您使用引导程序，这将对您有所帮助：

<table class="table table-borderless">

【讨论】：

【解决方案5】：

在 CSS 中为 .fixed-table-container 更改 border 的大小

CSS：

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

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

【讨论】：

border-bottom: none !important; 从其余两个边框中删除了一个边框。但大部分底部仍然存在。

【解决方案6】：

html

<table class="table noborder">

css

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

【讨论】：

【解决方案7】：

使用引导在 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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

很简单，请在您的 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;
}

希望有所帮助。

【讨论】：

【解决方案11】：

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

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

【讨论】：

你的意思是.table thead tr th作为标题
是的，这会删除表格的所有边框，如下所示：