Question

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

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

如何使用响应式移动表显示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：

这是 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;
}

JqueryMobile添加2列表

1 个答案: