當屏幕尺寸較小時使用滾動條的引導表

Question

我有一個8列和幾行的引導表，並且當屏幕的尺寸減小時我想用滾動條顯示此表，因爲否則的話，表格就會脫離包裝佈局。問題在於滾動條總是顯示，而它非常難看，我只想在必要時顯示，我該怎麼做？ 是更好地使用jQuery插件，這樣table collapse

<div class="panel-body"> 
     <div class="table-responsive"> 
      <div class="dataTable_wrapper"> 
       <table class="table table-striped table-bordered table-hover" 
        id="fleetsTable"> 
        <thead> 
         <tr> 
          <th>Application</th> 
          <th>Cubic</th> 
          <th>Power</th> 
          <th>Euro class</th> 
          <th>Engine Type</th> 
          <th>Traction</th> 
          <th>Transmission</th> 
          <th>Cars</th> 
          <th>Add Car</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr th:each="fleet : ${fleets}" class="odd gradeX"> 
          <td class="col-xs-2" th:text="${fleet.application}"></td> 
          <td class="col-xs-1" th:text="${fleet.cubic}"></td> 
          <td class="col-xs-1" th:text="${fleet.power}"></td> 
          <td class="col-xs-1" th:text="${fleet.euroClass}"></td> 
          <td class="col-xs-1" th:text="${fleet.engineType}"></td> 
          <td class="col-xs-2" th:text="${fleet.traction}"></td> 
          <td class="col-xs-2" th:text="${fleet.transmission}"></td> 
          <td class="col-xs-1"><button id="showCarsButton" 
            type="button" class="btn btn-primary">Show cars</button></td> 
          <td class="col-xs-1"><button id="addCarButton" 
            type="button" class="btn btn-primary">Add car</button></td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- /.panel-body --> 
    </div> 

Answer 1

使用本 表格樣式=「溢出：汽車」