设备屏幕中未安装表格

Question

我是新的jquery mobile。我实现了table.it在浏览器中正确显示。但是它没有安装在设备屏幕中。如何解决这个问题？请任何人可以帮助我。

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

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

使用

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

Answer 2

（不是真正的答案，但是我还不能发表评论）我不确定这是否适合您，但是您可以尝试使用JQuery Mobile Grid：http://jquerymobile.com/demos/1.0rc3/#/demos/1.0rc3/docs/content/content-grids.html

宽度将自动调整。

Answer 3

我知道这是一则旧文章，但从屏幕截图中可以看出，表标题中的文本意味着最小宽度始终将大于屏幕宽度。

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

不过，这是移动设备的常见问题-数据表在响应式设计中不能很好地发挥作用。可以在这里找到有关选项/解决方法的良好链接：

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

希望这可以帮助遇到类似问题的任何人。

Answer 4

使用css属性word-break：break-all;

table th，td {text-align：left;内边距：6px;断字：全力以赴；}