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는 모든 CR 표준 이전 속성을 IE8 표준 모드에서 자체 '-ms'상자로 옮기겠다고 위협하고 있습니다. (이것이 항상 그렇게한다면 이치에 맞았을 것입니다. 그러나 지금은 모두에게 불편합니다.)

반면에 IE8이 버그를 수정했을 가능성이 있습니다.

또한 white-space: nowrap;스타일 에 추가 해야했습니다. 그렇지 않으면 요소가 스크롤 기능을 제거하는 영역으로 줄어 듭니다.

이 솔루션은 father 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