如何使現有的表在JQuery Mobile中響應？

我有以下表，如何使現有的表在JQuery Mobile中響應？

<table style="height: 803px;" width="591"> 
     <tbody> 
      <tr> 
       <td> 
        <p><strong>Model#</strong></p> 
       </td> 

       <td> 
        <p><strong>Item Code</strong></p> 
       </td> 

       <td> 
        <p><strong>Description</strong></p> 
       </td> 

       <td> 
        <p><strong>Old Retail</strong></p> 
       </td> 

       <td> 
        <p><strong>Promotion Retail</strong></p> 
       </td> 

       <td> 
        <p><strong>Remarks</strong></p> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <p>WM608</p> 
       </td> 

       <td> 
        <p>11619082</p> 
       </td> 

       <td> 
        <p>Campomatic front load washer &nbsp;6 KG, 800RPM ,8 
        programs,electronic control,</p> 
       </td> 

       <td> 
        <p>799</p> 
       </td> 

       <td> 
        <p>799</p> 
       </td> 

       <td> 
        <p>FREE CAMPOMATIC vacuum cleaner model#RC1808 1800W WORTH 
        199 DHS + FREE Campomatic hair dryer HP20 WORTH 99 DHS</p> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <p>IWE-81281ECOUK</p> 
       </td> 

       <td> 
        <p>11675623</p> 
       </td> 

       <td> 
        <p>Indesit front load washer ,8kg,1200 rpm,digital display 
        ,Energy Efficiency Class: A+, white color</p> 
       </td> 

       <td> 
        <p>1899</p> 
       </td> 

       <td> 
        <p>1599</p> 
       </td> 

       <td> 
        <p>300 DHS GV+free persil 3ltr detergent 2 pcs worth 78 
        dhs</p> 
       </td> 
      </tr> 

     </tbody> 
    </table>

我想讓它響應。我正在使用Jquery Mobile

來源

2014-02-27 user960567

快速的答案，使用百分比寬度。 –

@RoryMcCrossan，謝謝。哪裏？ – user960567

只需將data-role='table'添加到您的表格元素即可。默認的表類型是迴流，所以當它達到較小的空間時，表將會堆疊。

有關詳細信息，請參閱以下鏈接。

http://demos.jquerymobile.com/1.4.0/table-reflow/

編輯：更新鏈接到最新版本

來源

2014-02-27 12:04:33

謝謝。另請參閱http://stackoverflow.com/questions/22069374/re-initialize-all-elements-of-jquery-mobile-after-ajax-request – user960567

一個響應表僅僅是一個100％的寬度表。

您只需設置您的表與此CSS：.table { width: 100%; }

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Responsive table</title> 
<style> 
.table { 
    width: 100%; 
    background: blue; 
    color: white; 
} 
</style> 
</head> 
<body> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th colspan="2">Table head</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

來源

2014-02-27 12:04:49

如何使現有的表在JQuery Mobile中響應？

回答

相關問題