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

Bootstrap table. How to remove all borders from table?

提问by ytterrr

How to remove all (especially outer ones) borders from bootstrap table? Here is a table without inner borders:

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

HTML

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/

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

Which CSS styles need to be overriden to remove all borders?

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

回答by Ashesh Kumar Singh

In this case you need to set the border below the tableand the borders around - table header, table data, table containerall to 0px in-order to totally get rid of all borders.

在这种情况下，你需要设置边框下面的表格和边框周围-表headeR，表中的数据，表箱都在有序0像素，以完全摆脱所有的边界。

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

回答by wenyi

you can set classes option to table table-no-bordered, example: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html.

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

Edit: this feature is only supported in develop version(after v1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src.

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

回答by Ferrrmolina

Try this:

尝试这个：

.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

演示 JSFiddle

回答by user2314737

Change the bordersize in the CSS for the .fixed-table-container

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

CSS:

CSS：

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

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

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

回答by Shuhad zaman

html

html

<table class="table noborder">

css

css

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

回答by pabloferraz

Using Bootstrap In html

在 html 中使用 Bootstrap

<table class="table no-border">

In css

在 CSS 中

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

Source: https://codepen.io/netsi1964/pen/ogVQqG

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

回答by Sameera Karunanayake

If you are using bootstrap this will help you:

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

<table class="table table-borderless">

回答by fateme

for remove outer border you should remove border from .fixed-table-containeras follow :

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

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

回答by loyola

It's simple, Kindly add the below code in your CSS sheet.It will remove all the borders in the table

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

Hope helped.

希望有所帮助。

回答by shyam

If you are using CSS3 this will help you:

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

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