让桌子适合屏幕？ （JQueryMobile /科尔多瓦）

Question

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

Answer 1

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

Answer 2

你有没有设置表格宽度的原因？通过将其设置为95％，可以减少滚动条的可能性。

<table width="95%">