Table rendering issues using jQuery Mobile

问题

I'm new to jQuery Mobile and I'm trying to render a table with headers in the left column and data on the right column, as demonstraded in jQuery Mobile docs here.

Here's my test code:

<div data-role="page" id="home">
 <div data-role="header" data-theme="b">
  <h1>Header</h1>
 </div>
 <div data-role="content">
  <ul class="subheader" data-role="listview" data-divider-theme="d" data-inset="false">
   <li data-role="list-divider" role="heading">Section</li>
  </ul>
  <table data-role="table" data-mode="reflow">
   <thead>
    <tr>
     <th>Head 1</th>
     <th>Head 2</th>
     <th>Head 3</th>
     <th>Head 4</th>
     <th>Head 5</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Data 1</td>
     <td>Data 2</td>
     <td>Data 3</td>
     <td>Data 4</td>
     <td>Data 5</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>

Here's as it's rendered on my desktop (Firefox, Mac OS X) - just as I want:

And here's as it's rendered on my mobile device (PhoneGap, Samsung Galaxy S2):

Ermm, what happens? Shoudn't it render <th>'s on first column and <td>'s on second column? Why it didn't happen? What I've to change to accomplish that? Thank you in advance!

回答1:

Found the problem: I was missing HTML5 doctype on the document. Without the doctype, tables wasn't getting reflow style on PhoneGap's embedded browser.

来源：https://stackoverflow.com/questions/15986481/table-rendering-issues-using-jquery-mobile