jquery mobile中的嵌套表问题答案

【问题标题】：Nested Table issue in jquery mobilejquery mobile中的嵌套表问题
【发布时间】：2013-06-10 15:40:45
【问题描述】：

我在 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>

我导致：

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

请帮我解决这个问题

提前致谢拉维.M

【问题讨论】：

请阅读：meta.stackexchange.com/questions/149890/…
我使用了没有任何数据角色的表，它们在 jquery mobile 上运行良好

标签： jquery html jquery-mobile

【解决方案1】：

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

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

这应该会给你一个坚实的开始。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：