Nested Table issue in jquery mobile

Question

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

was expecting the result as shown in the first image,

Please help me in this issue

Thanks in advance Ravi.M

I used tables without any data-roles for them, and they worked fine on jquery mobile — CME64
– CME64, Commented Jun 14, 2013 at 4:51

krishwader · Accepted Answer · 2013-06-14 06:17:13Z

1

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.

answered Jun 14, 2013 at 6:17

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SaurabhLP · Accepted Answer · 2013-06-14 04:50:24Z

0

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

answered Jun 14, 2013 at 4:50

SaurabhLP

3,6559 gold badges42 silver badges71 bronze badges

Collectives™ on Stack Overflow

Nested Table issue in jquery mobile

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related