jQuery Mobile 表格重排 - 表格不水平显示答案

【问题标题】：jQuery Mobile Table reflow - Table not show horizontallyjQuery Mobile 表格重排 - 表格不水平显示
【发布时间】：2015-01-31 17:34:14
【问题描述】：

我在 JQuery Mobile Reflow 上遇到了一个问题，其中只有两列仍然以垂直顺序显示。

如何在水平表格中很好地显示？

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>

【问题讨论】：

标签： jquery jquery-mobile html-table reflow

【解决方案1】：

在此处阅读 jQuery Mobile 文档：Table: Reflow

这[使表格具有响应性]是通过包装一些简单的 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) 重排。当然，您需要对此进行调整。

FIDDLE

【讨论】：