jQuery Mobile Table reflow - Table not show horizontally

Question

I facing a problem on JQuery Mobile Reflow where there is only two column it still display in vertical order.

How can I display nicely into horizontal table?

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

Read the jQuery Mobile documentation here: Table: Reflow

This [to make the table responsive] is done by wrapping a few simple CSS rules in and a media query that only applies the rules above a certain width breakpoint. The styles make the table header rows visible, display the cells in a tabular format, and hide the generated label elements within each. Here is an example media query that swaps the presentation at 40em (640 pixels):

So, including the ui-responsive class to your table will make it to reflow in any width under 40em (640px).

In the same page there is a solution, that is to create your own style.

@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;
    }
}

An then apply the style to your table:

<table data-role="table" class="my-custom-breakpoint" id="result">
...
</table>

That will make the table to reflow under 10em screen with (180px). Of course, you'll need to adjust this.

FIDDLE