分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 引导表.如何从表中删除所有边框？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何从 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样式需要被覆盖以删除所有边框？

解决方法

在这种情况下,您需要将表格下方的边框和表格数据,表格容器全部设置为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>