1

私はjQuery Mobileを初めて使用し、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) でレンダリングされたものです - 私が望むように:

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

これが私のモバイル デバイス (PhoneGap、Samsung Galaxy S2) でレンダリングされたものです。

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

うーん、どうなる？<th>を 1 列目に、 を 2 列目に表示するべきではあり<td>ませんか? なぜそれが起こらなかったのですか？それを達成するために私は何を変えなければなりませんか？前もって感謝します！

4

1 に答える 1

0

問題が見つかりました: ドキュメントに HTML5 doctype がありませんでした。doctype がないと、PhoneGap の組み込みブラウザーでテーブルがリフロー スタイルになりませんでした。

于 2013-04-17T20:02:53.877 に答える