レスポンシブテーブルが正しくブートストラップCSSのために崩壊していない

Question

モバイルデバイスでは、外観がはるかによく見えて2行に落ちるが、ブートストラップCSSを使用する必要があるため、問題が発生している。

私が達成しようとしていること。
https://jsfiddle.net/5u3a2snh/8/

それがブートストラップで動作するように取得することができません：
https://jsfiddle.net/5u3a2snh/9/

ため、ブートストラップの変更のいずれかを受け入れることはありません私の本格的なプロジェクト：
https://jsfiddle.net/vo1npqdx/320/

誰かが助けてくださいます私はまだブートストラップCSSを使用してこれを動作させるには？私はなぜCSSが私のテーブルにそんなに影響を与えているのか不明です。

<div class="col-lg-12 col-md-12 col-sm-12"> 
    <div class="table-responsive"> 
     <table class="table table-bordered table-striped"> 
      <thead> 
       <tr> 
        <th>Pay</th> 
        <th>Print</th> 
        <th>Year</th> 
        <th>Property Id</th> 
        <th>Name/Location</th> 
        <th>Status</th> 
        <th>Amount Paid</th> 
        <th>Date Paid</th> 
        <th>Due</th> 
        <th>Pin</th> 
        <th>Box</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td> 
        <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
        <td>2016</td> 
        <td><a href="invoicepage.html">2609110008</a></td> 
        <td>Table cell</td> 
        <td>Paid</td> 
        <td>1,372.37</td> 
        <td>12/01/2016</td> 
        <td>0.00</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
       </tr> 
       <tr> 
        <td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td> 
        <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
        <td>2015</td> 
        <td><a href="invoicepage.html">2609110008</a></td> 
        <td>Table cell</td> 
        <td>Paid</td> 
        <td>1,430.83</td> 
        <td>02/22/2016</td> 
        <td>0.00</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
       </tr> 
       <tr> 
        <td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td> 
        <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
        <td>2014</td> 
        <td><a href="invoicepage.html">2609110008</a></td> 
        <td>Table cell</td> 
        <td>Paid</td> 
        <td>1,407.88</td> 
        <td>02/02/2015</td> 
        <td>0.00</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

JSタグを追加しました。これは、このプロジェクトで使用している別の言語からも同様に修正できます。

Answer 1

cssがブートストラップCSSではなく、必要な要素で使用されるように、より具体的なセレクタを与える必要があります。

td { 
      /* Behave like a "row" */ 
      border: none; 
      border-bottom: 1px solid #eee; 
      position: relative; 
      padding-left: 50%; 
     } 

へ：たとえば、私はあなたのCSSクラスを更新したtd cssクラスtable-borderとtable内部trの内側ではなく、これらのスタイルを使用することを述べて

table.table-bordered tr td { 
      /* Behave like a "row" */ 
      border: none; 
      border-bottom: 1px solid #eee; 
      position: relative; 
      padding-left: 50%; 
     } 

あまり具体的でないブートストラップスタイル。

あなたのフィドルのこのフォークをご覧ください。https://jsfiddle.net/2tq9gy24/1/

注：すべてのあなたのCSSを通過し、それがブートストラップによって上書きされている場所、それは、より具体的にする必要があります。