Jquery mobile 表未安装在设备屏幕中

我是新的jquerymobile。我实现了表。它在浏览器中正确显示。但它没有安装在设备屏幕上。如何解决这个问题？谁能帮帮我吗

code

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

单页模板
表{宽度：100%；}
表th，td{文本对齐：左；填充：6px；}

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

返回
热量跟踪器
日期
食物摄入
燃烧的卡路里
网
十二月二十日

（不是真正的答案，但我还不能发表评论） 我不确定这是否适合您，但您可以尝试JQuery移动网格：

宽度将自动调整。

（不是真正的答案，但我还不能发表评论） 我不确定这是否适合您，但您可以尝试JQuery移动网格：

---

宽度将自动调整。

我知道这是一篇旧文章，但从屏幕截图上看，表格标题中的文本意味着最小宽度始终大于屏幕宽度

您可以删除单词之间的下划线或减小字体大小以帮助文本匹配，但如果数据单元格中的文本再次扩展表格大小，则这可能没有用

然而，这是移动设备的一个常见问题——数据表不能很好地与响应性设计配合使用。有关选项/解决方法的良好链接，请参见：

---

希望这能帮助任何有类似问题的人。

我知道这是一篇老文章，但从屏幕截图上看，表格标题中的文本意味着最小宽度始终大于屏幕宽度

您可以删除单词之间的下划线或减小字体大小以帮助文本匹配，但如果数据单元格中的文本再次扩展表格大小，则这可能没有用

然而，这是移动设备的一个常见问题——数据表不能很好地与响应性设计配合使用。有关选项/解决方法的良好链接，请参见：

希望这能帮助任何有类似问题的人。

使用

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

使用

---

使用CSS属性

单词break:break all

：

table th, td {
  text-align:left;
  padding:6px;
  word-break: break-all;
}

---

使用CSS属性

单词break:break all

：

table th, td {
  text-align:left;
  padding:6px;
  word-break: break-all;
}

---

这似乎不合适-列名也没有空格-你试过减小字体大小吗？这似乎不合适-列名也没有空格-你试过减小字体大小吗？别忘了将表放入

的ad

和

的tbody

，否则它将不起作用（请参阅）别忘了把你的桌子吐到

thead

和

tbody

，否则它就不起作用了（请参阅）