使 table 适合屏幕？ (JQueryMobile/Cordova)

Question

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

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

JavaScript table:

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

Answer 1

您可以使用 jQM 的数据角色 table 属性：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>";

将 table 添加到 DOM 后刷新它：

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

你也可以看看Responsive Tables。

Answer 2

有没有设置 table 宽度的原因？通过将其设置为 95%，可以减少出现滚动条的可能性。

<table width="95%">

使 table 适合屏幕？ (JQueryMobile/Cordova)

Make table fit on screen? (JQueryMobile/Cordova)

javascript

css

jquery

jquery-mobile

cordova