ブートストラップ3のレスポンシブテーブルに罫線を追加する方法

Question

ブートストラップを使用してレスポンシブテーブルに罫線を追加する際に問題があります。

<div class="panel"> 
    <div class="table-responsive text-center"> 

    <table class="table table-bordered"> 
     <thead> ... </thead> 
     <tbody> ... </tbody> 
    </table> 

    </div> 
</div> 

ボーダーテーブルは、「テーブル応答」クラスを削除した場合にのみ機能します。

私のコードは何ですか？このクラスと同様に動作しますか？お使いのパネルクラスは1つのCSSプロパティ

.panel>.table-bordered, .panel>.table-responsive>.table-bordered {border:0;}

を持っており、それはあなたのテーブルの外側の境界線が見えなくなりますように

Answer 1

は思えます。必要に応じて、具体的には

border: 1px solid #ddd !important;を提供することができます。

<div class="panel"> 
    <div class="table-bordered table-responsive text-center"> 

    <table class="table table-bordered" style="border: 1px solid: #ddd !important;"> 
     <thead> ... </thead> 
     <tbody> ... </tbody> 
    </table> 

    </div> 
</div> 

また、パネルクラスを削除して他のものを使用することもできます。それも動作するかもしれません。要素を調べて、どの要素がどのクラスやCSSプロパティを使用しているかを調べることができます。

あなたはまだ国境を取得しません。また、表の境界線の色と背景色が同じでないことを確認してください。

Answer 2

私もこの問題を偶然に確認します。狭いスクリーンデバイス、 上またはパネルの内側に意味のメディアクエリーscreen and (max-width: 767px)、内部

、

.table-responsive > .table-bordered

はBootstrap3には国境がないように設定されている：私が見つけたことは非常に興味深いです。私は意図的にこれを行うブートストラップの理由を知らない。私は一種のブートストラップがそれをやっている理由を知っている：

@media screen and (max-width: 767px) { 
... 
    .table-responsive > .table-bordered { 
    border: 0; 
    } 
... 
} 

.panel > .table-bordered, 
.panel > .table-responsive > .table-bordered { 
    border: 0; 
} 

更新：

Bootstrap3のソースコードの一部は次のようになります。狭い画面では、<div class="table-responsive">には境界線があります。また、枠付きの表が<div class="panel">の直接の子である場合、パネルはその表の境界線のように動作します。そのため、Bootstrapは意図的にこれらのdiv内のテーブルの外枠を削除しました。

あなたのコードには何も見当たりません。あなたは、ブートストラップが推奨するように、それを使用していないだけです。