jQuery Mobile - Table Reflow Custom Styles

Description

You can specify the custom styles for the reflow table.

Example

Following example demonstrates the use of table reflow custom styles in the jQuery Mobile Framework.

Live Demo 
<!DOCTYPE html>
   <head>
      <title>Table Reflow Custom Styles</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   
      <style>
         #table_columns thead th {
            color: #FF00BF;
            font-weight: bold;
         }
      
         #table_columns tbody td {
            color: #00BFFF;
            font-weight: normal;
         }
      </style>
   </head>
   
   <body>
      <div data-role = "header">
         <h2>Header</h2>
      </div>
      
      <table data-role = "table" id = "table_columns" data-mode = "reflow" 
         class = "ui-responsive">
         <thead>
            <tr>
               <th data-priority = "1">Position</th>
               <th>Team</th>
               <th data-priority = "2">Rating</th>
               <th data-priority = "3">Points</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>1</td>
               <td>SOUTH AFRICA</td>
               <td>114</td>
               <td>3308</td>
            </tr>
            
            <tr>
               <td>2</td>
               <td>INDIA</td>
               <td>110</td>
               <td>3535</td>
            </tr>
            
            <tr>
               <td>3</td>
               <td>AUSTRALIA</td>
               <td>109</td>
               <td>4376</td>
            </tr>
            
            <tr>
               <td>4</td>
               <td>PAKISTAN</td>
               <td>106</td>
               <td>2977</td>
            </tr>
            
            <tr>
               <td>5</td>
               <td>NEW ZEALAND</td>
               <td>99</td>
               <td>3578</td>
            </tr>
            
            <tr>
               <td>6</td>
               <td>ENGLAND</td>
               <td>99</td>
               <td>3940</td>
            </tr>
            
            <tr>
               <td>7</td>
               <td>SRI LANKA</td>
               <td>89</td>
               <td>3123</td>
            </tr>
            
            <tr>
               <td>8</td>
               <td>WEST INDIES</td>
               <td>76</td>
               <td>2504</td>
            </tr>
            
            <tr>
               <td>9</td>
               <td>BANGLADESH</td>
               <td>47</td>
               <td>1026</td>
            </tr>
            
            <tr>
               <td>10</td>
               <td>ZIMBABWE</td>
               <td>5</td>
               <td>53</td>
            </tr>
         </tbody>
      </table>
      
      <div data-role = "footer">
         <h2>Footer</h2>
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as jqm_table_reflow_custom_styles.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_table_reflow_custom_styles.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements