嘗試使用表格獲得水平滾動

Question

我正在嘗試使用表格創建水平圖像滑動條。我想要顯示5張圖像，無論頁面寬度（它的大小是否正確），但是，滾動不起作用。

我懷疑我在表中使用了錯誤的css。

如果有更好的解決方法，我不需要使用表格。

這裏是小提琴：https://jsfiddle.net/vsadm9qz/

HTML

<div class="galleryWrap"> 
    <table border="0"> 
     <tbody> 
      <tr> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="1" src="http://placehold.it/300x300?text=IMG+1" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="2" src="http://placehold.it/300x300?text=IMG+2" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="3" src="http://placehold.it/300x300?text=IMG+3" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="4" src="http://placehold.it/300x300?text=IMG+4" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="5" src="http://placehold.it/300x300?text=IMG+5" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="6" src="http://placehold.it/300x300?text=IMG+6" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="7" src="http://placehold.it/300x300?text=IMG+7" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="8" src="http://placehold.it/300x300?text=IMG+8" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="9" src="http://placehold.it/300x300?text=IMG+9" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="10" src="http://placehold.it/300x300?text=IMG+10" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="11" src="http://placehold.it/300x300?text=IMG+11" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="12" src="http://placehold.it/300x300?text=IMG+12" style="max-height: 390px;" /> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

CSS

body { 
    margin: 0; 
} 
table { 
    border-collapse: collapse; 
} 
td { 
    width: 20%; 
    padding: 0px; 
} 
img { 
    width: 100% 
} 
.galleryWrap { 
    width: 100%; 
    overflow-x: scroll; 
} 

Answer 1

添加這些樣式：

td { 
    display: inline-block; 
} 

table { 
    white-space: nowrap; //prevent cells from wrapping 
} 

Fiddle 1

您還可以通過擺脫所有的表的HTML簡化代碼，一個d。使用這些樣式：

.galleryWrap { 
    white-space: nowrap; 
    width: 100%; 
    overflow-x: scroll; 
} 

.horizontalGalleryImageHolder { 
    width: 20%; 
    display: inline-block; 
} 

Fiddle 2

Answer 2

在這裏你去！

https://jsfiddle.net/vsadm9qz/2/

爲滑塊標準過程是內聯塊中的圖像的容器和在兩個div包裹它們。第一個有overflow-x: scroll，第二個寬度足以容納所有的圖像。

像這樣：

<div class="scroll"> 
    <div class="galleryWrap"> 
     <div class="image"><img></div> 

和

.image{ 
    display: inline-block; 
    width: 8% // 100/number of images 
} 

img { 
    width: 100% 
} 

.galleryWrap { 
    width: 1200%; // 100 * number of images 
} 

.scroll { 
    overflow-x: scroll; 
}