使用jQuery Mobile的表格渲染问题 [英] Table rendering issues using jQuery Mobile

问题描述

我是jQuery Mobile的新手，我正在尝试渲染一个表，该表的左列为标题，右列为数据，这在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.

这是我的测试代码:

<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)上呈现的样子-正如我想要的那样:

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

这是在我的移动设备(PhoneGap，三星Galaxy S2)上呈现的图像:

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

Ermm，会发生什么?它不应该在第一列呈现<th>并在第二列呈现<td>吗?为什么没有发生?为了实现这一目标，我需要改变什么?预先谢谢你！

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!

推荐答案

发现了问题:我在文档上缺少HTML5文档类型.没有doctype，表在PhoneGap的嵌入式浏览器中就无法获得重排样式.

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.

这篇关于使用jQuery Mobile的表格渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！