Елемент CSS div - як відображати лише горизонтальні смуги прокрутки?

У мене є контейнер div і визначив його стиль таким чином:

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

Це дає мені як горизонтальну, так і вертикальну смуги прокрутки автоматично, коли я заповнюю свою таблицю, яка міститься в цьому розділі. Я просто хочу, щоб автоматично відображалися лише горизонтальні смуги прокрутки. Я змінитиму висоту таблиці програмно.

Як це зробити?

Ви не повинні отримувати як горизонтальні, так і вертикальні смуги прокрутки, якщо ви не зробите вміст досить великим, щоб вимагати їх.

Однак ви зазвичай робите в IE через помилку. Перевірте інші браузери (Firefox тощо), щоб дізнатися, чи це насправді лише IE.

IE6-7 (серед інших браузерів) підтримує запропоноване розширення CSS3, щоб самостійно встановлювати смуги прокрутки, які можна використовувати для придушення вертикальної смуги прокрутки:

overflow: auto;
overflow-y: hidden;

Вам також може знадобитися додати для IE8:

-ms-overflow-y: hidden;

оскільки Microsoft погрожують перенести всі властивості, що пред'являються до стандартів CR, у власне поле '-ms' у режимі стандартів IE8. (Це мало б сенс, якби вони завжди робили це так, але зараз це незручність для всіх.)

З іншого боку, цілком можливо, що IE8 все одно виправить помилку.

Мені також довелося додати white-space: nowrap;стилю, інакше елементи загорнеться в область, до якої ми видаляємо можливість прокрутки.

Це рішення не містить специфікації висоти / ширини для батька діва, тому воно буде чутливим до зміни розміру вікон, а найкорисніше спричиняє появу горизонтальних полос прокрутки, якщо потрібно.

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

Погляньте на DEMO

Щоб показати обидва:

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

Fiddle: 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