由於自舉css響應表沒有正確摺疊

Question

我想讓我的表響應，以便在移動設備上外觀看起來好多了，並下降到兩行，但我遇到問題，因爲我必須使用引導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是用於你想要的元素，而不是引導CSS。舉例來說，我已經更新了你的CSS類：

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

要：

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

其中指出一個內部td一個tr內table與CSS類table-border將使用這些風格頗有當年不太具體的引導程序樣式。

請參閱您的搗鼓這個叉：https://jsfiddle.net/2tq9gy24/1/

注意：你應該通過所有你的CSS，使之更加具體在那裏被過度寫的引導。