Foros del Web - Ver Mensaje Individual

juancaalbarracin · #1 (**permalink**) 16/10/2016, 19:46

Saludos tengo un pequeño problema, Estoy intentando hacer una tabla responsive, funciona perfecto en chrome y mozilla pero en safari el display: block no hace absolutamente nada; les coloco el codigo:

Código HTML:

Ver original<html>
<head>
 
<style type="text/css">
body {
    background-color: #003;
}
table#mitabla{
    background-color:#FFF;
    color:#CCC;
}
table#mitabla thead {
    background-color:#CCC;
    color:#009; 
}
@media only screen and (max-width: 700px){
    table#mitabla{
        background-color:#333;
        color:#FFF;
    }
    table#mitabla thead{
        display:none;
    }
 
    table#mitabla tbody td{
        display:block;
        padding-left:1em;
        padding-right:1em;
        padding-top:0.5em;
    }
    table#mitabla tbody td:first-child{
        background-color:#6F0;
        color:#F00;
    }
    
}
</style>
 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
</head>
<body>
<table id='mitabla'>
<thead>
    <tr>
      <th>Titulo Col1</th>
      <th>Titulo Col2</th>
      <th>Titulo Col3</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>label1.1</td>
      <td>cuadro 1.2</td>
      <td>texto 1.3</td>
    </tr>
    <tr>
      <td>label2.1</td>
      <td>cuadro 2.2</td>
      <td>texto 2.3</td>
    </tr>
    <tr>
      <td>label 3.1</td>
      <td>cuadro 3.2</td>
      <td>texto 3.3</td>
    </tr>
    <tr>
      <td>label 4.1</td>
      <td>cuadro 4.2</td>
      <td>texto 4.3</td>
    </tr>
  </tbody>
</table>  
 
</body>
</head>

en la imagen a la izquierda esta safari a la derecha chrome, que es como debe quedar

[img=http://img215.imagevenue.com/loc67/th_657396564_responsive_122_67lo.jpg]