画面にテーブルをフィットさせますか？ （JQueryMobile/Cordova）

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のデータ・ロールテーブルの属性を使用することができます。

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にテーブルを追加した後w3schoolsはそれを更新します。

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

Responsive Tablesもご覧ください。

Answer 2

テーブル幅を設定しない理由はありますか？これを95％に設定すると、スクロールバーを持つ機会が減ります。

<table width="95%">