jquery mobile中的嵌套表问题

Question

我在jquery移动表中遇到了问题。

我希望像

那样实现结果

我从纯HTML代码

获得

HTML

<table border="1">
    <tr>
        <td>Rank</td>
        <td>1941
        <table border="1">
            <tr>
                <td>Rank</td>
                <td>1941</td>
            </tr>   
        </table>
        </td>
    </tr>   
</table>

我想使用data-role =“table”，data-mode =“reflow”使用jquery移动表来实现相同的功能。 当我做同样的事情时，

<table data-role="table" id="my-table-next" data-mode="reflow" border="1">
  <thead>
    <tr>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1941
      <table data-role="table" id="my-table-second" data-mode="columntoggle" border="1">
  <thead>
    <tr>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1941</td>
    </tr>
    </tbody>
</table>
      </td>
    </tr>
    </tbody>
</table>

我的结果是：

期待结果如第一张图片所示，

请在这个问题上帮助我

提前致谢 Ravi.M

Answer 1

我同意SaurabhLP的观点。这不是使用表的用例。而且，jQM表不支持rowspan（我认为你会使用它）。而是使用gridviews。请参阅 docs 。

我还在 jsFiddle 为您设​​置了一个演示。

这应该会给你一个良好的开端。

我使用了很多内联样式，您可以将它们移动到样式表，并通过向其添加!important;属性来使其工作。

Answer 2

我建议不要使用表格，为此使用网格系统它适用于灵活的行和列，网格系统不会为嵌套结构设计发出： -

http://view.jquerymobile.com/1.3.1/demos/widgets/grids/

谢谢希望对你有所帮助...