Jquery mobile - List view with multiple columns

Question

i have to show 3 columns in List view. I tried having table inside <li><table></table></li> but its not looking good. Is there any way to show 3 columns in list view.?

I tried ui-grid-b for 3 columns. but CSS issues...jsfiddle.net/9ZBAS/1 I tried and i could see columns overlapping if i use href and working find if not using href but without href i couldnt get the next icon button.

Any help?

stay_hungry · Accepted Answer · 2012-06-14T03:30:45.740

8

try this one

<li >
  <div class="ui-grid-b">
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
 </div>


 </li>

check this link;; http://jquerymobile.com/test/docs/content/content-grids.html

Edited

Check this one http://jsfiddle.net/9ZBAS/47/

edited Jun 14 '12 at 03:30

answered Jun 13 '12 at 08:40

stay_hungry

1,448
1
14
21

Can we use fixed layout as well as word wrap option for this li since the content is either truncated or the block is mergeing with other block. ? – ASD Jun 13 '12 at 09:42
http://jsfiddle.net/9ZBAS/1/ I tried and i could see columns overlapping if i use href and working find if not using href but without href i couldnt get the next icon button. – ASD Jun 13 '12 at 16:48

score 1 · Answer 2 · edited May 23 '17 at 12:00

Alternative to the Grid layout, using tables. This is not well documented in jQM

http://jquerymobile.com/demos/1.1.0/docs/content/content-html.html

HTML:

<table summary="This table lists all the JetBlue flights.">
    <caption>
        Travel Itinerary
    </caption>
    <thead>
        <tr>
            <th scope="col">Flight:</th>
            <th scope="col">From:</th>
            <th scope="col">To:</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5">Total: 3 flights</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">JetBlue 983</th>
            <td>Boston (BOS)</td>
            <td>New York (JFK)</td>
        </tr>
        <tr>
            <th scope="row">JetBlue 354</th>
            <td>San Francisco (SFO)</td>
            <td>Los Angeles (LAX)</td>
        </tr>
        <tr>
            <th scope="row">JetBlue 465</th>
            <td>New York (JFK)</td>
            <td>Portland (PDX)</td>
        </tr>
    </tbody>
</table>

CSS:

<style type="text/css"> 
    table { width:100%; }
    table caption { text-align:left;  }
    table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
    table th, td { text-align:left; padding:6px;} 
</style>

View:

enter image description here

JQuery Mobile Table

Jquery mobile - List view with multiple columns

2 Answers2