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 文档： 表：回流

这 [使表响应] 是通过包装一些简单的 CSS 规则和一个仅应用特定宽度断点以上的规则的媒体查询来完成的。这些样式使表格标题行可见，以表格格式显示单元格，并在每个单元格中隐藏生成的标签元素。下面是一个以 40em（640 像素）交换演示文稿的示例媒体查询：

因此，将ui-responsive类包含在表中将使其以低于 40em（640px） 的任何宽度重排。

在同一页面中有一个解决方案，那就是创建自己的样式。

@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 屏幕下重排 （180px）。当然，您需要对此进行调整。

小提琴