CSS div要素-水平スクロールバーのみを表示する方法

私はdivコンテナを持っており、そのスタイルを次のように定義しています：

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

これにより、このdivに含まれるテーブルにデータを入力すると、水平スクロールバーと垂直スクロールバーの両方が自動的に表示されます。水平スクロールバーだけが自動的に表示されるようにしたいだけです。プログラムでテーブルの高さを変更します。

どうすればよいですか？

コンテンツを必要なだけ大きくしない限り、水平スクロールバーと垂直スクロールバーの両方を取得しないでください。

ただし、通常はバグのためにIEで行います。他のブラウザ（Firefoxなど）をチェックして、実際にそれを実行しているのがIEだけかどうかを確認します。

IE6-7（他のブラウザーの中で）は、垂直スクロールバーを抑制するために使用できるスクロールバーを個別に設定するために提案されたCSS3拡張をサポートしています。

overflow: auto;
overflow-y: hidden;

IE8を追加する必要がある場合もあります。

-ms-overflow-y: hidden;

Microsoftは、CR8以前のすべてのプロパティをIE8標準モードの独自の「-ms」ボックスに移動すると脅迫しているためです。（これは、彼らが常にその方法で行っていれば理にかなっていたでしょうが、今では誰にとっても不便です。）

一方、IE8でバグが修正される可能性は十分にあります。

またwhite-space: nowrap;、スタイルに追加する必要がありました。そうしないと、要素が、スクロール機能を削除する領域に折り返されます。

このソリューションは、父親のdivのための高さ/幅の指定せずに、それがされるように、応答ウィンドウのサイズ変更と最も有用な原因水平スクロールバーが必要なだけの場合に表示します。

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

デモを見てください

両方を表示するには：

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

X軸を非表示：

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

Y軸を非表示：

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

あなたはそれoverflow: autoを作り、最大の固定された高さと幅をそのように与えることもできます、そこにテキストまたは何かがある場合、オーバーフローすると、必要なスクロールバーのみが表示されます

私はCSSプロパティを使用します：1） " overflow-x: auto"; 2） " overflow-y: hidden"; 3） " white-space: nowrap";

コンテナーと内部DIVSコンポーネントの両方に、幅を設定することを忘れないでください。プロパティ "white-space：nowrap"は、内部DIVSが別の行にドロップしないようにします。

次のHTMLを検討します。

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

次のCSSを使用して、水平スクロールのみを行います。

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

フィドル：https : //jsfiddle.net/qrjh93x8/（上記のコードでは機能しません）

以下を使用

<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にはそのoverflow-x特性がありますが、それに対する大きなサポートは期待できません。ではCSS2あなたがすることができるすべては、一般的な設定されscrollたポリシーをし、あなたの仕事widthsやheightsない混乱にそれらをアップ。

overflow: autoサポートされていないCSS3ブラウザーでの作業に使用しないスクロールバーを設定および非表示にする必要があります。このCSSオーバーフローを見てください。XME.im