current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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

share|improve this question
    
Please read: meta.stackexchange.com/questions/149890/… –  Antony Jun 14 '13 at 4:01
    
I used tables without any data-roles for them, and they worked fine on jquery mobile –  CME64 Jun 14 '13 at 4:51

2 Answers 2

up vote 0 down vote accepted

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.

share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.