1

我是 jQuery Mobile 的新手，我正在尝试呈现一个表格，其中左列中的标题和右列中的数据，如此处的 jQuery Mobile 文档中所示。

这是我的测试代码：

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

这是在我的桌面（Firefox，Mac OS X）上呈现的 - 正如我想要的那样：

http://i.imgur.com/Ov4F5Gz.png

这是在我的移动设备（PhoneGap、Samsung Galaxy S2）上呈现的：

http://i.imgur.com/Vkv4chN.png

嗯，会发生什么？它不应该<th>在第一列渲染 ' 而<td>在第二列渲染 ' 吗？为什么没有发生？我必须改变什么才能做到这一点？先感谢您！

4

1 回答 1

0

发现问题：我在文档上缺少 HTML5 文档类型。如果没有 doctype，表格不会在 PhoneGap 的嵌入式浏览器上获得重排样式。

于 2013-04-17T20:02:53.877 回答