css - horizontal scrolling

Elemento div CSS: ¿cómo mostrar barras de desplazamiento horizontal solamente?

Question

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 llene mi tabla que está contenida en este div. Solo quiero que solo las barras de desplazamiento horizontales aparezcan automáticamente. Modificare la altura de la tabla programáticamente.

¿Cómo hago esto?

Answer 1

Deberíamos configurar el overflow: auto y ocultar una barra de desplazamiento que no usamos para trabajar en el navegador CSS3 no compatible. Mire este desbordamiento de CSS; XME.im

Answer 2

Esta solución no tiene especificación de altura / ancho para el div padre, por lo que responderá al cambio de tamaño de la ventana y será más útil porque las barras de desplazamiento horizontales aparecen 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

Answer 3

No debería obtener barras de desplazamiento horizontales y verticales a menos que haga que el contenido sea lo suficientemente grande como para requerirlas.

Sin embargo, normalmente lo haces en IE debido a un error. Compruebe en otros navegadores (Firefox, etc.) para averiguar si de hecho solo IE lo está haciendo.

IE6-7 (entre otros navegadores) admite la extensión CSS3 propuesta para establecer barras de desplazamiento de forma independiente, que puede utilizar para suprimir la barra de desplazamiento vertical:

overflow: auto;
overflow-y: hidden;

Es posible que también deba agregar para IE8:

-ms-overflow-y: hidden;

ya que Microsoft amenaza con mover todas las propiedades estándar anteriores a CR a su propia casilla ''-ms'' en IE8 Standards Mode. (Esto tendría sentido si siempre lo hubieran hecho de esa manera, pero ahora es un inconveniente para todos).

Por otro lado, es completamente posible que IE8 haya solucionado el error de todos modos.

Answer 4

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>

Answer 5

También tuve que agregar white-space: nowrap; al estilo, de lo contrario, los elementos se ajustarían al área en la que estamos eliminando la capacidad de desplazarse.

Answer 6

Use la siguiente

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

Answer 7

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 internos de DIVS. La propiedad "white-space: nowrap" permite que el DIVS interno no caiga en una línea diferente.

Teniendo en cuenta 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 solo un desplazamiento horizontal:

.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 */
}

Fiddle: https://jsfiddle.net/qrjh93x8/ (no funciona con el código anterior)

Answer 8

también puedes hacerlo overflow: auto y dar un alto y ancho fijo máximo de esa manera, cuando el texto o lo que esté allí se desborde, mostrará solo la barra de desplazamiento requerida

Answer 9

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 de scroll y trabajar sus widths y heights para no estropearlos.

Answer 10

.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; }