CSS div элемент-как показать только горизонтальные полосы прокрутки?

Question

CSS div элемент-как показать только горизонтальные полосы прокрутки?

У меня есть контейнер div и определили свой стиль следующим образом:

div#tbl-container 

{

    width: 600px;   

    overflow: auto;    

    scrollbar-base-color:#ffeaff

}

Это дает мне как горизонтальные, так и вертикальные полосы прокрутки автоматически, как только я заполняю свою таблицу, которая содержится в этом div.
Я просто хочу, чтобы только горизонтальные полосы прокрутки появлялись автоматически. Я буду изменять высоту таблицы программно.

Как мне это сделать?

460 10

html css

10 ответов:

Comments

Ничего не найдено.

bobince · Accepted Answer · 2008-11-03 13:35:23

вы не должны получать как горизонтальные, так и вертикальные полосы прокрутки, если вы не сделаете содержимое достаточно большим, чтобы требовать их.

однако вы обычно делаете в IE из-за ошибки. Проверьте в других браузерах (Firefox и др.) чтобы узнать, является ли это на самом деле только IE, который это делает.

IE6-7 (среди других браузеров) поддерживает предлагаемое расширение CSS3 для независимой установки полос прокрутки, которое вы можете использовать для подавления вертикальной полосы прокрутки:
overflow: auto;
overflow-y: hidden;
Вы можете также нужно добавить для IE8:
-ms-overflow-y: hidden;
поскольку Microsoft угрожает переместить все свойства pre-CR-standard в свой собственный ящик "- ms " в режиме стандартов IE8. (Это имело бы смысл, если бы они всегда делали это таким образом, но теперь это скорее неудобство для всех.)

С другой стороны, вполне возможно, что IE8 все равно исправит ошибку.

Hoby · Accepted Answer · 2011-11-30 01:17:29

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

Dinesh Appuhamy · Accepted Answer · 2011-01-21 21:41:25

показывать как:

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

Marconi · Accepted Answer · 2014-09-05 17:25:06

данное решение без спецификации высоты / ширины для отца 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
}
посмотри демо

Tsundoku · Accepted Answer · 2008-11-03 13:38:48

вы также можете сделать это overflow: auto и дать максимальную фиксированную высоту и ширину таким образом, когда текст или что-то там, переполняется он будет показывать только необходимую полосу прокрутки

Amélie Medem · Accepted Answer · 2017-05-23 16:43:24

я использую свойства CSS : 1) "overflow-x: auto"; 2) "overflow-y: hidden"; 3) "white-space: nowrap";

Не забудьте установить ширину, как для контейнера, так и для внутренних компонентов DIVS. свойство "пробел : nowrap" позволяет внутренним дивам не падать на другую линию.

учитывая следующий 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/ (не работает с приведенным выше кодом)

Anudeep Sharma · Accepted Answer · 2013-06-20 00:43:13

использовать следующий

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

joginder · Accepted Answer · 2012-12-11 08:22:37

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

Gareth · Accepted Answer · 2014-01-02 17:22:37

CSS3 имеет overflow-x свойство, но я бы не ожидал большой поддержки для этого. В CSS2 все, что вы можете сделать, это установить общие scroll политика и widths и heights чтобы не испортить их.

Guest · Accepted Answer · 2012-10-11 10:34:23

мы должны ставить overflow: auto и скрыть полосу прокрутки, которую мы не используем для работы с неподдерживаемым браузером CSS3. Посмотри на это переполнение CSS; XME.im