logo标签列表

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

csstwitter-bootstraptwitter-bootstrap-3bootstrap-table
16

如何从Bootstrap表格中删除所有边框（特别是外边框）？这是一个没有内部边框的表格：

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

11个回答
24

在这种情况下，您需要将边框设置为表格下方

，并将表头、表数据和表容器的边框全部设置为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>

5
如果您正在使用Bootstrap，这可以帮助您：
<table class="table table-borderless">
4
它能够工作，但仍然会出现两个水平边框线- 链接。 - ytterrr
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

3
2

在 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; 从其余两个边框中移除了一个边框。但最底部的仍然存在。 - ytterrr
2

html

<table class="table noborder">

css

.noborder td, .noborder th {
    border: none !important;
}
1
为了移除外边框，您需要从 .fixed-table-container 中移除边框，如下所示：
.fixed-table-container{border: 0px;}
0
如果您正在使用CSS3，这将对您有所帮助：
.table tbody tr td, .table tbody tr th {
    border: none;
}
你是不是想说表头应该用 .table thead tr th？ - ton
是的，这将删除类似于以下表格的所有边框：<table class="table"> - shyam
0
很简单，只需在您的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;
}

希望有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接