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

只需删除 data-role=table:

Here is a 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;
}