Nested Table issue in jquery mobile

I have an issue in jquery mobile table.

i want to acheive the result like

which i got from the Plain HTML code

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>

i want to achieve the same using jquery mobile table using data-role="table", data-mode="reflow". When i did the same,

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

i resulted in :

was expecting the result as shown in the first image,

Please help me in this issue

Thanks in advance Ravi.M

---

I agree with SaurabhLP's view. This isn't a use case of using a table. And moreover, jQM tables dont support rowspan (which i think you'd use). Instead use gridviews. See the docs.

I've also set up a demo for you at jsFiddle.

This should give you a solid start.

I've used a lot of inline styles, you could move them to a stylesheet and make them work by adding a !important; attribute to it.

---

I recommend not to use tables for this, use grid system for this it will be appropriate for flexible rows and columns, grid system will not issue for nested structure design for you:-

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

Thanks hope this help for you...

链接地址: http://www.djcxy.com/p/65382.html

上一篇: jQuery的移动表列宽度

下一篇: 嵌套表问题在jQuery的移动