web-dev-qa-db-ja.com

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

csstwitter-bootstraptwitter-bootstrap-3bootstrap-table
14
ytterrr

この場合、境界線を設定する必要がありますテーブルの下および境界線around-table heade r、table data、table container all to 0px in-order for完全にすべての境界線を取り除きます。

.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>
22
Ashesh Kumar Singh

クラスオプションをテーブル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 。

4
wenyi

これを試して：

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

デモJSFiddle

3
Ferrrmolina

.fixed-table-containerのCSSでborderサイズを変更します

CSS：

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

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

2
user2314737

html

<table class="table noborder">

css

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

Bootstrap In 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

2
pabloferraz

bootstrap=を使用している場合は、これが役立ちます。

<table class="table table-borderless">
1
sameera karunanayake

外側の境界線を削除するには、次のように.fixed-table-containerから境界線を削除する必要があります。

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

これは簡単です。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;
}

希望した。

0
loyola

CSS3を使用している場合、これが役立ちます。

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

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

0
Rafael Almeida