15

ブートストラップ テーブルからすべての (特に外側の) 境界線を削除するにはどうすればよいですか? 内枠のない表は次のとおりです。

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 スタイルをオーバーライドする必要がありますか?

4

11 に答える 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>

于 2015-04-26T06:12:02.583 に答える
4

クラス オプションを表 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。

于 2015-04-26T05:54:21.240 に答える
1

外枠を削除するには、次のように枠を削除する必要があり.fixed-table-containerます。

.fixed-table-container{border: 0px;}
于 2015-04-26T07:06:00.663 に答える
0

border: none !important;と に設定する必要が.fixed-table-container あり .tableます。またborder-bottom: none !important;、最初のルール に設定します.table th, .table td。
更新されたフィドル: http://jsfiddle.net/sba7wkvb/5/

于 2015-04-26T06:12:44.660 に答える
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;
}

ホープは助けた。

于 2016-08-04T16:44:43.137 に答える