องค์ประกอบ 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 ทั้งหมดไปยังกล่อง '-ms' ของตนเองในโหมดมาตรฐาน IE8 (นี่น่าจะสมเหตุสมผลถ้าพวกเขาทำเช่นนั้นเสมอ แต่ก็ไม่สะดวกสำหรับทุกคนในตอนนี้)

ในทางกลับกัน 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
}

ลองดู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 */
}

ซอ: 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 Overflow นี้; XME.im