CODEWITHSUNDEEP
jqueryhtmljquery-mobile
RONE
RONE

Reputation: 5485

Nested Table issue in jquery mobile

I have an issue in jquery mobile table.

i want to acheive the result like

innertable_plain_html.png

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

Upvotes: 1

Views: 920

Answers (2)

krishwader
krishwader

Reputation: 11371

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.

Upvotes: 1

SaurabhLP
SaurabhLP

Reputation: 3657

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

Upvotes: 0

Related Questions