jQuery Mobile - Estilos personalizados de reflujo de tabla

Descripción

Puede especificar los estilos personalizados para la tabla de reflujo.

Ejemplo

El siguiente ejemplo demuestra el uso de estilos personalizados de reflujo de tablas en jQuery Mobile Framework.

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_table_reflow_custom_styles.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_table_reflow_custom_styles.html y se mostrará el siguiente resultado.

↰ Previous page