jQuery Mobile Table reflow - Таблица не отображается горизонтально

Question

Я столкнулся с проблемой на 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>

Answer 1

Прочитайте документацию по jQuery Mobile здесь: Таблица: 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