Question

我在JQuery Mobile Reflow上面临一个问题，那里只有两列，它仍然按垂直顺序显示。

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

<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（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

jQuery Mobile Table reflow - 表格未横向显示

1 个答案: