14

Can anyone point me to any sample or can provide any sample of a Jquery Mobile table please?

I've seen the demos on their website and found no tables.

I need to be able to create a table that will look good on Mobile / iPad.

gsamaras
  • 71,951
  • 46
  • 188
  • 305
Satch3000
  • 47,356
  • 86
  • 216
  • 346

3 Answers3

14

http://jquerymobile.com/demos/1.0a4.1/#docs/forms/../../docs/content/content-html.html right click and view source:

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

Updating the Links:

Serge P
  • 1,173
  • 3
  • 25
  • 39
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
  • The table is rendered without jQM theme styling. So this only proves hte OP can't use a table. – Potatoswatter Dec 19 '12 at 03:57
  • @Potatoswatter this is what jQM Provides for Tables ( currently ) http://jquerymobile.com/demos/1.2.0/docs/content/content-html.html ( view the source ) There is an effort for future a release: http://jquerymobile.com/branches/swipe/docs/tables/index.html – Phill Pafford Dec 19 '12 at 13:36
10

Try this layout instead

<ul>
<li> <!--first item -->
    <table>
        <tr>
            <td>Heading1</td>
            <td>Meaning1</td>
        </tr>
        <tr>
            <td>Heading2</td>
            <td>Meaning2</td>
        </tr>
        <tr>
            <td>Heading3</td>
            <td>Meaning3</td>
        </tr>
    </table>
</li>
<li> <!-- second item -->
    <table>
        <tr>
            <td>Heading1</td>
            <td>Meaning1</td>
        </tr>
        <tr>
            <td>Heading2</td>
            <td>Meaning2</td>
        </tr>
        <tr>
            <td>Heading3</td>
            <td>Meaning3</td>
        </tr>
    </table>
</li>
</ul>

and the css

ul {
    width: 100%;    
    margin-left: 0px;
    padding: 0px; 
}

ul li {
    list-style-type: none;
    border-bottom: 1px dashed gray;
    margin-top: 10px; 
}

*fixed small bugs but have to add this to make substantial edit

Serge P
  • 1,173
  • 3
  • 25
  • 39
Alex
  • 1,336
  • 10
  • 19
1

And if you want a crazy alternative you can always create a listview with grids in it. It might look interesting.

naugtur
  • 16,827
  • 5
  • 70
  • 113
  • 2
    FYI - This appraoch turns into some of the ugliest most un-maintainable HTML you've ever seen, in a hurry. – Nick Daniels Aug 26 '11 at 18:43
  • This might be true in your case. I have used this idea (but the other way around - a grid with listviews in it) in a page and I was happy with the result. – naugtur Aug 30 '11 at 07:01