- Precio
- A convenir
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.
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.
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.
