CSS div element-¿cómo mostrar solo barras de desplazamiento horizontales?
Tengo un contenedor div y he definido su estilo de la siguiente manera:
div#tbl-container
{
width: 600px;
overflow: auto;
scrollbar-base-color:#ffeaff
}
Esto me da barras de desplazamiento horizontales y verticales automáticamente una vez que lleno mi tabla que está contenida por este div. Solo quiero que solo las barras de desplazamiento horizontales aparezcan automáticamente. Modificaré la altura de la tabla programáticamente.
¿Cómo hago esto?
10 answers
No debe obtener barras de desplazamiento tanto horizontales como verticales a menos que haga que el contenido sea lo suficientemente grande como para requerirlas.
Sin embargo, normalmente lo hace en IE debido a un error. Compruebe en otros navegadores (Firefox, etc.) para averiguar si es, de hecho, es decir que lo está haciendo.
IE6 - 7 (entre otros navegadores) admite la extensión CSS3 propuesta para establecer barras de desplazamiento de forma independiente, que podría usar para suprimir la barra de desplazamiento vertical:
overflow: auto;
overflow-y: hidden;
Es posible que también necesite agregar para IE8:
-ms-overflow-y: hidden;
Como Microsoft están amenazando con mover todas las propiedades pre-CR-standard en su propio cuadro '-ms' en el modo Estándar IE8. (Esto habría tenido sentido si siempre lo hubieran hecho de esa manera, pero es más bien un inconveniente para todos ahora.)
Por otro lado, es completamente posible que IE8 haya corregido el error de todos modos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-03 11:35:23
También tuve que agregar white-space: nowrap; al estilo, de lo contrario los elementos se envolverían en el área a la que estamos eliminando la capacidad de desplazarse.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-29 23:17:29
Para mostrar ambos:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;"> </div>
Ocultar Eje X:
<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"> </div>
Ocultar Eje Y:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"> </div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-21 19:41:25
Esta solución es sin especificación de altura/ancho para el div padre por lo que será responsivo para cambiar el tamaño de la ventana y lo más útil es que aparezcan barras de desplazamiento horizontales solo si es necesario.
.container{
padding:20px;
border:dotted 1px;
white-space:nowrap;
overflow-x:auto;
}
.box{
width:100px;
height:180px;
background-color: red;
margin:10px;
display:inline-block
}
Echa un vistazo a DEMO
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-05 14:25:06
También puede hacerlo overflow: auto y dar un máximo fijo de altura y anchura de esa manera, cuando el texto o lo que está allí, se desborda mostrará solo la barra de desplazamiento requerida
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-03 11:38:48
Uso las propiedades CSS :
1) "overflow-x: auto";
2) "overflow-y: hidden";
3) "white-space: nowrap";
No olvide establecer un Ancho, tanto para el contenedor como para los componentes DIVS internos. La propiedad "white-space : nowrap" permite que los DIVS internos no caigan en una línea diferente.
Considerando el siguiente HTML:
<div class="container">
<div class="inner-1"></div>
<div class="inner-2"></div>
<div class="inner-3"></div>
</div>
Utilizo el siguiente CSS para tener un desplazamiento horizontal solamente:
.container {
height: 80px;
width: 600px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
height: 60px;
max-width: 250px;
display: inline-block; /* this should fix it */
}
Violín: https://jsfiddle.net/qrjh93x8 / (no funciona con el código anterior)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 13:43:24
Utilice lo siguiente
<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-19 21:43:13
.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}
.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none; width:140px; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-11 06:22:37
CSS3 tiene la propiedad overflow-x, pero no esperaría un gran soporte para eso. En CSS2 todo lo que puede hacer es establecer una política general scroll y trabajar su widths y heights para no estropearlos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-02 15:22:37
Debemos establecer overflow: auto y ocultar una barra de desplazamiento que no usamos para trabajar en el navegador CSS3 no compatible.
Mira esto Desbordamiento de CSS; XME.im
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-11 07:34:23