0

我在 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>
4

1 回答 1

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

小提琴

于 2014-12-03T09:01:57.750 回答