html - 尝试使用表格进行水平滚动

Question

我正在尝试使用表格创建水平图像 slider 。我想要显示 5 张图像，无论页面宽度如何(大小正确)，但是，滚动不起作用。

我怀疑我对表格使用了错误的 css。

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

这是 fiddle :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 代码并使用这些样式来简化:

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

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

Fiddle 2