Question

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

Answer 1

在这种情况下，您需要在表格下设置边框，边框设置 - 表格标题 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>

Answer 2

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

Answer 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

Answer 4

更改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 5

HTML

<table class="table noborder">

CSS

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

Answer 6

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

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

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

Answer 8

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

logger=logging.getLogger()
logger.setLevel(logging.DEBUG)

file_handler=logging.FileHandler('foo.log')
stream_handler=logging.StreamHandler()

stream_formatter=logging.Formatter(
    '%(asctime)-15s %(levelname)-8s %(message)s')
file_formatter=logging.Formatter(
    "{'time':'%(asctime)s', 'name': '%(name)s', \
    'level': '%(levelname)s', 'message': '%(message)s'}"
)

file_handler.setFormatter(file_formatter)
stream_handler.setFormatter(stream_formatter)

logger.addHandler(file_handler)
logger.addHandler(stream_handler)

Answer 9

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

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

希望帮助。

Answer 11

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

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

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

11 个答案: