使表格适合屏幕？ (jQueryMobile/科尔多瓦)答案

【问题标题】：Make table fit on screen? (JQueryMobile/Cordova)使表格适合屏幕？ (jQueryMobile/科尔多瓦)
【发布时间】：2016-04-02 18:40:00
【问题描述】：

我的 javascript 函数基本上是创建一个动态页面并显示从数据库中获取的数据，但是当显示数据时，它会溢出移动屏幕的宽度。

谁能告诉我我可以用什么来确保表格适合屏幕，或者是否有其他方法可以让我的数据适合我的数据。

JavaScript 表格：

var formElements = "<table><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr>";
 for (var i = 0; i < response.rows.length; i++) {
formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "</td></tr>";
                            }

【问题讨论】：

标签： javascript jquery css cordova jquery-mobile

【解决方案1】：

可以使用jQM的data-role表属性：w3schools

var formElements = "<table id='yourTableID' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>";
 for (var i = 0; i < response.rows.length; i++) {
    formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "</td></tr>";
 }

 formElements+="</tbody></table>";

将表格添加到 DOM 后刷新它：

$("#yourTableID").table("refresh");

您也可以查看Responsive Tables。

【讨论】：

虽然没有使用表格刷新，但当我使用它时，它会阻止屏幕滚动。

【解决方案2】：

您不设置表格宽度是否有原因？通过将其设置为 95%，您可以减少出现滚动条的机会。

<table width="95%">

【讨论】：