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

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 horizontal y vertical automáticamente una vez que lleno mi tabla que está contenida en este div. Solo quiero que las barras de desplazamiento horizontal aparezcan automáticamente. Modificaré la altura de la tabla mediante programación.

¿Cómo hago esto?

No debe 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 saber si en realidad solo lo está haciendo IE.

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

overflow: auto;
overflow-y: hidden;

También es posible que deba agregar para IE8:

-ms-overflow-y: hidden;

ya que Microsoft amenaza con mover todas las propiedades estándar anteriores a CR a su propio cuadro '-ms' en el modo de estándares IE8. (Esto habría tenido sentido si siempre lo hubieran hecho así, pero ahora es un inconveniente para todos).

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

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

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

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>

también puede hacerlo overflow: autoy dar una altura y un ancho máximos fijos de esa manera, cuando el texto o lo que sea que esté allí, se desborde, mostrará solo la barra de desplazamiento requerida

Yo 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 DIVS. La propiedad "white-space: nowrap" permite que los DIVS internos no caigan 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>

Yo uso 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)

Usa 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%;" >

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

CSS3 tiene la overflow-xpropiedad, pero no esperaría un gran soporte para eso. En CSS2, todo lo que puede hacer es establecer una scrollpolítica general y trabajar widthspara heightsno estropearlos.

Deberíamos establecer overflow: autoy ocultar una barra de desplazamiento que no usamos para trabajar en un navegador CSS3 incompatible. Mira este desbordamiento de CSS; XME.im