Elemen div CSS - cara menampilkan bilah gulir horizontal saja?

Saya memiliki wadah div dan telah mendefinisikan gayanya sebagai berikut:

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

Ini memberi saya bilah gulir horizontal dan vertikal secara otomatis setelah saya mengisi tabel saya yang berisi div ini. Saya hanya ingin bilah gulir horizontal muncul secara otomatis. Saya akan memodifikasi ketinggian tabel secara terprogram.

Bagaimana saya melakukan ini?

Anda seharusnya tidak mendapatkan scrollbar horizontal dan vertikal kecuali jika Anda membuat konten yang cukup besar untuk membutuhkannya.

Namun Anda biasanya melakukannya di IE karena bug. Periksa di peramban lain (Firefox, dll.) Untuk mengetahui apakah sebenarnya hanya IE yang melakukannya.

IE6-7 (di antara browser lain) mendukung ekstensi CSS3 yang diusulkan untuk menetapkan scrollbar secara independen, yang dapat Anda gunakan untuk menekan scrollbar vertikal:

overflow: auto;
overflow-y: hidden;

Anda mungkin juga perlu menambahkan untuk IE8:

-ms-overflow-y: hidden;

karena Microsoft mengancam untuk memindahkan semua properti pra-CR-standar ke kotak '-ms' mereka sendiri dalam Mode Standar IE8. (Ini akan masuk akal jika mereka selalu melakukannya dengan cara itu, tetapi agak merepotkan bagi semua orang sekarang.)

Di sisi lain, sangat mungkin IE8 akan memperbaiki bug tersebut.

Saya juga harus menambahkan white-space: nowrap;gaya, jika tidak elemen akan membungkus ke dalam area yang kami hapus kemampuannya untuk menggulir.

Solusi ini tanpa spesifikasi tinggi / lebar untuk ayah div sehingga akan responsif untuk mengubah ukuran jendela dan paling berguna menyebabkan scrollbar horizontal muncul hanya jika diperlukan.

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

Lihatlah DEMO

Untuk menampilkan keduanya:

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

Sembunyikan X Axis:

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

Sembunyikan Y Axis:

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

Anda juga dapat membuatnya overflow: autodan memberikan tinggi dan lebar tetap maksimum dengan cara itu, ketika teks atau apa pun yang ada di sana, meluap itu hanya akan menampilkan bilah gulir yang diperlukan

Saya menggunakan properti CSS: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) " white-space: nowrap";

Jangan lupa untuk mengatur Lebar, baik untuk wadah dan komponen DIVS dalam. Properti "white-space: nowrap" memungkinkan DIVS bagian dalam tidak jatuh pada garis yang berbeda.

Mempertimbangkan HTML berikut:

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

Saya menggunakan CSS berikut untuk hanya memiliki gulir 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/ (tidak bekerja dengan kode di atas)

Gunakan yang berikut ini

<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 memiliki overflow-xproperti, tetapi saya tidak akan mengharapkan dukungan besar untuk itu. Di CSS2 yang bisa Anda lakukan adalah menetapkan scrollkebijakan umum dan mengerjakannya widthsserta heightstidak mengacaukannya.

Kita harus mengatur overflow: autodan menyembunyikan bilah gulir yang tidak kita gunakan untuk bekerja pada peramban CSS3 yang tidak didukung. Lihatlah CSS Overflow ini; XME.im