デバイスの画面に表が表示されない

Question

新しいjquery mobileです。私はテーブルを実装しました。ブラウザに正しく表示されています。しかし、デバイスの画面には表示されません。この問題を解決するには？誰でも助けてください。

code 

< HTML>

<ヘッド>

< meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Single page template</title>    
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>     

<style type="text/css"> 
    table { width:100%; }  
    table th, td { text-align:left; padding:6px;} 

</HEAD>

<体>

<div data-role="page" id="Calorie_Tracker"> 

    <div data-role="header" data-theme="b" > 
     <a data-role="button" data-rel="back" data-icon="back">back</a> 
     <h1>Calorie Tracker</h1> 
    </div> 

    <div data-role="content">       
      <table border="1" > 
       <tr> 
        <th>Date</th> 
        <th>Food_Intake</th> 
        <th>Calories_Burned</th> 
        <th>Net</th> 
       </tr> 

       <tr> 
        <td>Dec20</td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr>      
      </table>    
    </div> 

</div> 

</body>の
</HTML>

Answer 1

私は、これがためにやるかどうかわからない （そうでもない答えが、私はまだコメントを投稿することができません）あなたは、JQueryモバイルグリッドを試すことができます： http://jquerymobile.com/demos/1.0rc3/#/demos/1.0rc3/docs/content/content-grids.html

自動的に幅が調整されます。

Answer 2

これは古い投稿ですが、スクリーンショットから見ると、表のヘッダーのテキストは、最小幅が常に画面より大きくなることを意味しています。

単語間のアンダースコアを削除したり、フォントサイズを縮小してテキストが収まるようにすることができますが、データセル内のテキストがテーブルサイズを再び拡大する場合は使用できません。

これはモバイルデバイスの共通の問題ですが、データテーブルはレスポンシブなデザインではうまく機能しません。オプション/回避策との良好なリンクがここで見つけることができます：

http://css-tricks.com/responsive-data-tables/

希望は、この同様の問題を誰にも役立ちます。

Answer 3

使用

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke"></table>