JQuery移動表格列是一個高於另一個

我想在表格中顯示webview中的遊戲統計數據，比如排名和戰鬥歷史。我的HTML代碼看起來像JQuery移動表格列是一個高於另一個

<div data-role="page"> 
    <div data-role="header"> 
     <h1 id="title">Statistics</h1> 
    </div> 
    <div data-role="content"> 

      <div id="ranking_content"> 
       <table data-role="table" id="my-table" data-mode="reflow"> 
        <thead> 
         <tr> 
          <th>Username</th> 
          <th>Nation</th> 
          <th>Score</th> 
         </tr> 
        </thead> 
        <tbody> 
         {% for r in ranking %} 
         <tr> 
          <td>{{r['username']}}</td> 
          <td>{{r['nation']}}</td> 
          <td>{{r['score']}}</td> 
         </tr> 
         {% end %} 
        </tbody> 
       </table> 
      </div> 
      <div id="history_content"> 
       <table data-role="table" id="my-table"> 
        <thead> 
         <tr> 
          <th>Time</th> 
          <th>Against</th> 
          <th>Settlement</th> 
          <th>Gold</th> 
          <th>Rock</th> 
          <th>Wood</th> 
         </tr> 
        </thead> 
        <tbody> 
         {% for h in history %} 
         <tr> 
          <td>{{h['time']}}</td> 
          <td>{{h['against']}}</td> 
          <td>{{h['settlement']}}</td> 
          <td>{{h['gold']}}</td> 
          <td>{{h['rock']}}</td> 
          <td>{{h['wood']}}</td> 
         </tr> 
         {% end %} 
        </tbody> 
       </table> 
      </div> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar" data-position="fixed"> 
      <ul> 
       <li> 
        <a href="#" data-tab="ranking_content">Ranking List</a> 
       </li> 
       <li> 
        <a href="#" data-tab="history_content">Battles History</a> 
       </li> 
      </ul> 
     </div><!-- /navbar --> 
    </div> 
</div>

（我已經包含jquery.mobile-1.3.0.min.css和jquery.mobile-1.3.0.min.js）。它看起來沒問題，除了我沒有橫向順序的列，它顯示的是用戶名，國家，一個在另一個之上，我希望像一個正常的表格在一行=>水平。如何製作像html中的普通表格？

來源

2013-05-05 PaolaJ.

因爲JQM表格響應屏幕寬度，因此，它將每行轉換爲看起來像一個單獨的表格，並且標題垂直對齊。 – Omar 2013-05-05 14:50:36

jQuery Mobile有2種表格。

第一種是與迴流模式的表，就像你正在使用的一種。基本上，如果屏幕寬度變窄，那麼桌子將呈現垂直外觀。演示可以找到here。

如果沒有足夠的空間，第二種是女巫表中的切換模式表將隱藏一些列。將要隱藏哪些列可以手動配置。此模式的演示可以發現here。

我不知道你在用哪種設備，所以我不能給你答案，但我的建議是使用切換表。除非你被要求顯示每一個可能的列，否則這個模式看起來會更自然。最後一件事，如果你手動設置列寬，而不是讓jQuery Mobile表決定哪個寬度最適合表格。

來源

2013-05-05 18:02:14 Gajotres

JQuery移動表格列是一個高於另一個

回答

相關問題