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>
Read the jQuery Mobile documentation here: Table: Reflow
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.
An then apply the style to your table:
That will make the table to reflow under 10em screen with (180px). Of course, you'll need to adjust this.
FIDDLE