Question

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

code

＆LT; HTML＆GT;

＆LT;头＆GT;

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

＆LT; /头＆GT;

＆LT;体＆GT;

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

＆LT; /体＆GT;
＆LT; / HTML＆GT;

enter image description here

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;
  padding:6px;
  word-break: break-all;
}

表格未安装在设备屏幕中

4 个答案: