Qué hay de nuevo

¡BIENVENIDO AL NUEVO FORO 2.0!

Foro sobre SEO, Compra de tráfico, Black Hat y un marketplace de compra venta y servicios web.

HAZ CLICK AQUÍ PARA VER TODAS LAS NOVEDADES

Regístrate ahora para hacer negocios, compartir aportes ¡y mucho más!

Se solicita Resolver bug css

Registrado
25 Ene 2015
Mensajes
137
Reputación de negocios
11   0   0

Resolver bug css

A convenir
Contactar
Tengo una tabla responsive que ocupa el 100% de la pantalla, y cuando la tabla es más ancha que la pantalla, hace uso de un scroll horizontal con overflow-x:auto;display: flex;.

El problema que tengo es que en ciertas resoluciones y dependiendo del tamaño de la tabla, el contenido no se ajusta al 100% de la pantalla.
CSS:
<title>Tabla</title>

<style type="text/css">
 @media all and (max-width:727px){
 table{
 overflow-x:auto;
display: flex;
width:100% !important; //Ignora la directriz con display: flex;
}
#content {
   width:90% !important;
}
}

     table{
     width:100%;
     margin:20px 0!important;
     border-top:3px solid #4874A3;
}
 table th{
     padding:21px 25px 22px 25px;
     border-top:1px solid #fafafa;
     border-bottom:1px solid #e0e0e0;
     background:#f7f7f7;
     background:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#ebebeb));
     background:-moz-linear-gradient(top,#ededed,#ebebeb);
     }

 table tr{
     text-align:center;
     padding-left:7px;
}
 table td{
     padding:7px;
     border-top:1px solid #fff;
     border-bottom:1px solid #e0e0e0;
     border-left:1px solid #e0e0e0;
     background:#f5f5f5;
     background:-webkit-gradient(linear,left top,left bottom,from(#fbfbfb),to(#fafafa));
     background:-moz-linear-gradient(top,#fbfbfb,#fafafa);
}
 table tr:hover td{
     background:#f2f2f2;
     background:-webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#f0f0f0));
     background:-moz-linear-gradient(top,#f2f2f2,#f0f0f0)
}
#content {
    width:728px;
    margin: 0 auto 0;
}
</style>
</head>
<body>
<html>
<div id="content">
<table>
<tbody>
<tr>
<td><strong>Nombre</strong></td>
<td><strong>Apellido</strong></td>
<td><strong>Salario</strong></td>
</tr>
<tr>
<td>Pedro María</td>
<td>Juarez</td>
<td>$1.200</td>
</tr>
<tr>
<td>Isabel Cristina</td>
<td>Ceballos</td>
<td>$1.400</td>
</tr>
<tr>
</tbody>
</table>
</div>
</html>
</body>
Se trata de que en cualquier resolución de pantalla el contenido de la tabla ocupe el 100% de la pantalla, y en caso que la tabla sea más ancha que la pantalla, entonces hacer uso del scroll horizontal, tal como está.

Pago por paypal.
 
Arriba