Elemento div CSS - como mostrar apenas as barras de rolagem horizontal?

Eu tenho um contêiner div e defini seu estilo da seguinte maneira:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

Isso me fornece as barras de rolagem horizontal e vertical automaticamente quando eu preencho minha tabela que está contida por esta div. Eu só quero que apenas as barras de rolagem horizontal apareçam automaticamente. Modificarei a altura da tabela programaticamente.

Como eu faço isso?

Você não deve obter barras de rolagem horizontais e verticais, a menos que o conteúdo seja grande o suficiente para exigi-las.

No entanto, você normalmente faz no IE devido a um bug. Verifique em outros navegadores (Firefox etc.) para descobrir se é realmente apenas o IE que está fazendo isso.

O IE6-7 (entre outros navegadores) suporta a extensão CSS3 proposta para definir barras de rolagem de forma independente, que você pode usar para suprimir a barra de rolagem vertical:

overflow: auto;
overflow-y: hidden;

Você também pode precisar adicionar o IE8:

-ms-overflow-y: hidden;

pois a Microsoft está ameaçando mover todas as propriedades pré-padrão-CR para sua própria caixa '-ms' no modo de padrões do IE8. (Isso faria sentido se eles sempre fizessem dessa maneira, mas é um inconveniente para todos agora.)

Por outro lado, é perfeitamente possível que o IE8 tenha corrigido o bug de qualquer maneira.

Eu também tive que adicionar white-space: nowrap;ao estilo, caso contrário, os elementos seriam agrupados na área para a qual estamos removendo a capacidade de rolar.

Esta solução não possui especificação de altura / largura para a div pai, por isso será responsiva ao redimensionamento da janela e mais útil, pois as barras de rolagem horizontais aparecerão apenas se necessário.

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

Dê uma olhada no DEMO

Para mostrar os dois:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

Ocultar eixo X:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

Ocultar eixo Y:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

você também pode criar overflow: autoe fornecer uma altura e largura máximas fixas dessa maneira, quando o texto ou o que estiver lá estiver excedendo, ele mostrará apenas a barra de rolagem necessária

Eu uso as propriedades CSS: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) " white-space: nowrap";

Não se esqueça de definir uma Largura, tanto para o contêiner quanto para os componentes internos do DIVS. A propriedade "espaço em branco: nowrap" permite que os DIVS internos não caiam em uma linha diferente.

Considerando o seguinte HTML:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

Eu uso o seguinte CSS para ter apenas uma rolagem 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/ (não funciona com o código acima)

Use o seguinte

<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 tem a overflow-xpropriedade, mas eu não esperaria um grande suporte para isso. No CSS2, tudo o que você pode fazer é definir uma scrollpolítica geral e trabalhar com o seu widthse heightsnão estragar tudo.

Devemos definir overflow: autoe ocultar uma barra de rolagem que não usamos para trabalhar no navegador CSS3 sem suporte. Veja este estouro de CSS; XME.im