創建響應html表時的問題

Question

創建一個固定左列的html表。

下面是代碼：

<div class="table-responsive" > 
    <table class="table table-striped table-bordered table-hover table-condensed" style= "width:50%"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

鏈接：http://jsfiddle.net/4XG7T/3/

表格中顯示如下的移動設備上，並且還它不與固定的列滾動。

Mobile view

任何人都可以請建議我如何實現移動設備上的預期的行爲？

Answer 1

引導程序不支持移動設備上的漂亮表格視圖，您需要自行處理以顯示數據。

您需要選擇最適合您解決這個問題的機制，下面是一些鏈接，並且這一問題提供的解決方案思路：

• jQuery Mobile的：http://demos.jquerymobile.com/1.3.0-beta.1/docs/tables/table-reflow.html

• CSS技巧：https://css-tricks.com/responsive-data-tables/

• 您還可以儘量減少在移動設備上查看的列數，並且每行都提供一個「查看全部」按鈕，供用戶查看所有列在手風琴風格劃分

或者只是保持桌面滾動的行數據...