JqueryMobile添加2列表

Question

我想添加一个使用jquerymobile 2列的响应表。

！列应该左对齐，右对齐。 结果是2列在另一列下显示1，这不是我想要的。

如何使用响应表为移动设备显示2列表格，左侧单元格显示在左侧，右侧单元格显示在右侧，就像正常表格应该显示的一样，而不是下面的1个单元格另一个。 （该wepapp使用JQM）

<div data-role="main" class="ui-content"> 
<table style="width:100%" data-role="table" class="ui-responsive"> 
    <thead> 
    <tr> 
     <th data-priority="1" style="text-align:left"></th> 
     <th data-priority="1" style="text-align:right"></th> 

    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td style="text-align:left">1</td> 
     <td style="text-align:right">Alfreds Futterkiste</td> 

    </tr> 

    </tbody> 
</table> 

Answer 1

只需删除数据角色=表：

这里是一个DEMO

<table id="MyTable" class="ui-responsive table-stroke"> 
    <thead> 
     <tr> 
      <th class="left">Col 1</th> 
      <th class="right">Col 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="left">Row 1 Col 1</td> 
      <td class="right">Row 1 Col 2</td> 
     </tr> 
     <tr> 
      <td class="left">Row 2 Col 1</td> 
      <td class="right">Row 2 Col 2</td> 
     </tr> 
     <tr> 
      <td class="left">Row 3 Col 1</td> 
      <td class="right">Row 3 Col 2</td> 
     </tr> 
     <tr> 
      <td class="left">Row 4 Col 1</td> 
      <td class="right">Row 4 Col 2</td> 
     </tr>     
    </tbody> 
</table> 

#MyTable { 
    width: 100%; 
} 
#MyTable .left { 
    text-align: left; 
} 
#MyTable .right { 
    text-align: right; 
}