jQuery的移動表迴流 - 表不顯示水平

Question

我面臨JQuery的移動迴流焊一個問題，即僅存在兩個列它仍然在垂直順序顯示。

如何能很好地我進入顯示水平桌面？

http://jsfiddle.net/fsloke/w3tLc6fs/

<div> 
    <center> 
    <table data-role="table" class="ui-responsive" id="result"> 
     <thead> 
     <tr> 
      <th>A</th> 
      <th>C</th> 
     </tr> 
     </thead> 
     <tbody> 
    <tr> 
     <td style="text-align:right;">1</td>  
     <td style="text-align:right;">1</td> 
    </tr> 
    <tr> 
     <td style="text-align:right;">2</td>  
     <td style="text-align:right;">2</td> 
    </tr> 
    <tr> 
     <td style="text-align:right;"><b>3</b></td> 
     <td style="text-align:right;"><b>3</b></td> 
    </tr> 
    </tbody> 
    </table> 
    </center> 
</div> 

Answer 1

閱讀jQuery Mobile的文檔在這裏：Table: Reflow

這[使表響應]被包裹在幾個簡單的CSS規則和媒體查詢做到這一點只適用特定寬度斷點以上的規則。樣式使表的標題行可見，以表格的形式顯示所述細胞，並隱藏在每個所生成的標籤的元素。下面是一個例子媒體查詢交換在40EM演示（640個像素）：

因此，包括ui-responsive類表格將使它在任何寬度迴流下40EM（640像素）。

在同一個頁面上有一個解決方案，那就是創造自己的風格。

@media (min-width: 10em) { 
    /* Show the table header rows and set all cells to display: table-cell */ 
    .my-custom-breakpoint td, 
    .my-custom-breakpoint th, 
    .my-custom-breakpoint tbody th, 
    .my-custom-breakpoint tbody td, 
    .my-custom-breakpoint thead td, 
    .my-custom-breakpoint thead th { 
     display: table-cell; 
     margin: 0; 
    } 
    /* Hide the labels in each cell */ 
    .my-custom-breakpoint td .ui-table-cell-label, 
    .my-custom-breakpoint th .ui-table-cell-label { 
     display: none; 
    } 
} 

的那麼樣式應用到你的餐桌：

<table data-role="table" class="my-custom-breakpoint" id="result"> 
... 
</table> 

這將使該表下10em屏幕與迴流（180像素）。當然，你需要調整它。

FIDDLE