Foros del Web » Creando para Internet » CSS »

table responsive compatible con ie

 Estas en el tema de table responsive compatible con ie en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2013, 13:46
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 21 años, 9 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.
  #2 (permalink)  
Antiguo 05/12/2013, 15:04
Avatar de EmpireFX  
Fecha de Ingreso: marzo-2008
Ubicación: in da house
Mensajes: 60
Antigüedad: 16 años, 1 mes
Puntos: 3
Respuesta: table responsive compatible con ie
@media no es soportado por versiones antiguas de ie

http://caniuse.com/css-mediaqueries

Quizas utilizando js se pueda, desconosco la verdad y no creo sea diseño responsive.

Etiquetas: compatible, html, responsive, table
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:10.