Tema: table responsive compatible con ie
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/12/2013, 13:46
evoarte
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 22 años, 4 meses
Puntos: 2
table responsive compatible con ie
buenas noches,

este código permite hacer responsive una tabla, funciona OK en Chrome y FF, pero no en ie, ¿cómo podríamos hacerlo operativo también en ie?


Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.  
  4. <head>
  5.   
  6.     <meta charset="utf-8">
  7.     <title>Responsive Tables Demo</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.  
  10.     <meta name="description" content="A demo of some techniques for developing responsive tables.">
  11.     <meta name="author" content="Simon Elvery">
  12.  
  13.     <style>
  14.  
  15.         @media only screen and (max-width: 800px) {
  16.     
  17.             /* Force table to not be like tables anymore */
  18.             #no-more-tables table, 
  19.             #no-more-tables thead, 
  20.             #no-more-tables tbody, 
  21.             #no-more-tables th, 
  22.             #no-more-tables td, 
  23.             #no-more-tables tr { 
  24.                 display: block; 
  25.             }
  26.  
  27.             /* Hide table headers (but not display: none;, for accessibility) */
  28.             #no-more-tables thead tr { 
  29.                 position: absolute;
  30.                 top: -9999px;
  31.                 left: -9999px;
  32.             }
  33.  
  34.             #no-more-tables tr { border: 1px solid #ccc; }
  35.  
  36.             #no-more-tables td { 
  37.                 /* Behave  like a "row" */
  38.             border: none;
  39.             border-bottom: 1px solid #eee; 
  40.             position: relative;
  41.             padding-left: 50%; 
  42.             white-space: normal;
  43.             text-align:left;
  44.         }
  45.  
  46.         #no-more-tables td:before { 
  47.             /* Now like a table header */
  48.             position: absolute;
  49.             /* Top/left values mimic padding */
  50.             top: 6px;
  51.             left: 6px;
  52.             width: 45%; 
  53.             padding-right: 10px; 
  54.             white-space: nowrap;
  55.             text-align:left;
  56.             font-weight: bold;
  57.         }
  58.  
  59.         /*
  60.         Label the data
  61.         */
  62.         #no-more-tables td:before { content: attr(data-title); }
  63.  
  64.     }
  65.  
  66.     </style>
  67.     
  68. </head>
  69. <body>
  70.  
  71.       <table id="no-more-tables">
  72.           <thead class="cf">
  73.               <tr>
  74.                   <th>Code</th>
  75.                   <th>Company</th>
  76.                   <th class="numeric">Price</th>
  77.                   <th class="numeric">Change</th>
  78.                   <th class="numeric">Change %</th>
  79.                   <th class="numeric">Open</th>
  80.                   <th class="numeric">High</th>
  81.                   <th class="numeric">Low</th>
  82.                   <th class="numeric">Volume</th>
  83.               </tr>
  84.           </thead>
  85.             <tbody>
  86.                 <tr>
  87.                     <td data-title="Code">AAC</td>
  88.                     <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
  89.                     <td data-title="Price" class="numeric">$1.38</td>
  90.                     <td data-title="Change" class="numeric">-0.01</td>
  91.                     <td data-title="Change %" class="numeric">-0.36%</td>
  92.                     <td data-title="Open" class="numeric">$1.39</td>
  93.                     <td data-title="High" class="numeric">$1.39</td>
  94.                     <td data-title="Low" class="numeric">$1.38</td>
  95.                     <td data-title="Volume" class="numeric">9,395</td>
  96.                 </tr>
  97.                 <tr>
  98.                     <td data-title="Code" data-title="Code">AAD</td>
  99.                     <td data-title="Company">ARDENT LEISURE GROUP</td>
  100.                     <td data-title="Price" class="numeric">$1.15</td>
  101.                     <td data-title="Change" class="numeric">  +0.02</td>
  102.                     <td data-title="Change %" class="numeric">1.32%</td>
  103.                     <td data-title="Open" class="numeric">$1.14</td>
  104.                     <td data-title="High" class="numeric">$1.15</td>
  105.                     <td data-title="Low" class="numeric">$1.13</td>
  106.                     <td data-title="Volume" class="numeric">56,431</td>
  107.                 </tr>
  108.                 <tr>
  109.                     <td data-title="Code" data-title="Code">AAX</td>
  110.                     <td data-title="Company">AUSENCO LIMITED</td>
  111.                     <td data-title="Price" class="numeric">$4.00</td>
  112.                     <td data-title="Change" class="numeric">-0.04</td>
  113.                     <td data-title="Change %" class="numeric">-0.99%</td>
  114.                     <td data-title="Open" class="numeric">$4.01</td>
  115.                     <td data-title="High" class="numeric">$4.05</td>
  116.                     <td data-title="Low" class="numeric">$4.00</td>
  117.                     <td data-title="Volume" class="numeric">90,641</td>
  118.                 </tr>
  119.                 <tr>
  120.                     <td data-title="Code">ABC</td>
  121.                     <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
  122.                     <td data-title="Price" class="numeric">$3.00</td>
  123.                     <td data-title="Change" class="numeric">  +0.06</td>
  124.                     <td data-title="Change %" class="numeric">2.04%</td>
  125.                     <td data-title="Open" class="numeric">$2.98</td>
  126.                     <td data-title="High" class="numeric">$3.00</td>
  127.                     <td data-title="Low" class="numeric">$2.96</td>
  128.                     <td data-title="Volume" class="numeric">862,518</td>
  129.                 </tr>
  130.                 <tr>
  131.                     <td data-title="Code">ABP</td>
  132.                     <td data-title="Company">ABACUS PROPERTY GROUP</td>
  133.                     <td data-title="Price" class="numeric">$1.91</td>
  134.                     <td data-title="Change" class="numeric">0.00</td>
  135.                     <td data-title="Change %" class="numeric">0.00%</td>
  136.                     <td data-title="Open" class="numeric">$1.92</td>
  137.                     <td data-title="High" class="numeric">$1.93</td>
  138.                     <td data-title="Low" class="numeric">$1.90</td>
  139.                     <td data-title="Volume" class="numeric">595,701</td>
  140.                 </tr>
  141.                 <tr>
  142.                     <td data-title="Code">ABY</td>
  143.                     <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
  144.                     <td data-title="Price" class="numeric">$0.77</td>
  145.                     <td data-title="Change" class="numeric">  +0.02</td>
  146.                     <td data-title="Change %" class="numeric">2.00%</td>
  147.                     <td data-title="Open" class="numeric">$0.76</td>
  148.                     <td data-title="High" class="numeric">$0.77</td>
  149.                     <td data-title="Low" class="numeric">$0.76</td>
  150.                     <td data-title="Volume" class="numeric">54,567</td>
  151.                 </tr>
  152.                 <tr>
  153.                     <td data-title="Code">ACR</td>
  154.                     <td data-title="Company">ACRUX LIMITED</td>
  155.                     <td data-title="Price" class="numeric">$3.71</td>
  156.                     <td data-title="Change" class="numeric">  +0.01</td>
  157.                     <td data-title="Change %" class="numeric">0.14%</td>
  158.                     <td data-title="Open" class="numeric">$3.70</td>
  159.                     <td data-title="High" class="numeric">$3.72</td>
  160.                     <td data-title="Low" class="numeric">$3.68</td>
  161.                     <td data-title="Volume" class="numeric">191,373</td>
  162.                 </tr>
  163.                 <tr>
  164.                     <td data-title="Code">ADU</td>
  165.                     <td data-title="Company">ADAMUS RESOURCES LIMITED</td>
  166.                     <td data-title="Price" class="numeric">$0.72</td>
  167.                     <td data-title="Change" class="numeric">0.00</td>
  168.                     <td data-title="Change %" class="numeric">0.00%</td>
  169.                     <td data-title="Open" class="numeric">$0.73</td>
  170.                     <td data-title="High" class="numeric">$0.74</td>
  171.                     <td data-title="Low" class="numeric">$0.72</td>
  172.                     <td data-title="Volume" class="numeric">8,602,291</td>
  173.                 </tr>
  174.                 <tr>
  175.                     <td data-title="Code">AGG</td>
  176.                     <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
  177.                     <td data-title="Price" class="numeric">$7.81</td>
  178.                     <td data-title="Change" class="numeric">-0.22</td>
  179.                     <td data-title="Change %" class="numeric">-2.74%</td>
  180.                     <td data-title="Open" class="numeric">$7.82</td>
  181.                     <td data-title="High" class="numeric">$7.82</td>
  182.                     <td data-title="Low" class="numeric">$7.81</td>
  183.                     <td data-title="Volume" class="numeric">148</td>
  184.                 </tr>
  185.                 <tr>
  186.                     <td data-title="Code">AGK</td>
  187.                     <td data-title="Company">AGL ENERGY LIMITED</td>
  188.                     <td data-title="Price" class="numeric">$13.82</td>
  189.                     <td data-title="Change" class="numeric">  +0.02</td>
  190.                     <td data-title="Change %" class="numeric">0.14%</td>
  191.                     <td data-title="Open" class="numeric">$13.83</td>
  192.                     <td data-title="High" class="numeric">$13.83</td>
  193.                     <td data-title="Low" class="numeric">$13.67</td>
  194.                     <td data-title="Volume" class="numeric">846,403</td>
  195.                 </tr>
  196.                 <tr>
  197.                     <td data-title="Code">AGO</td>
  198.                     <td data-title="Company">ATLAS IRON LIMITED</td>
  199.                     <td data-title="Price" class="numeric">$3.17</td>
  200.                     <td data-title="Change" class="numeric">-0.02</td>
  201.                     <td data-title="Change %" class="numeric">-0.47%</td>
  202.                     <td data-title="Open" class="numeric">$3.11</td>
  203.                     <td data-title="High" class="numeric">$3.22</td>
  204.                     <td data-title="Low" class="numeric">$3.10</td>
  205.                     <td data-title="Volume" class="numeric">5,416,303</td>
  206.                 </tr>
  207.             </tbody>
  208.       </table>
  209.     
  210. </body>
  211.  
  212. </html>

un saludo,
josé carlos.