奇怪的HTML行包装

Question

我正在构建一个动态创建的图库，ajax/php在其中获取一些图像，然后将这些图像加载到动态创建的表中。我为这个表设置了宽度，我只想要x方向上的溢出。问题是表行(tr)似乎会自动换行。我尝试过使用css overflow-x属性，尝试过操纵表格宽度(在div中)，还尝试过使用css关闭换行。所有这些都没有帮助，表格会垂直滚动，而不是水平滚动。任何帮助都将不胜感激。谢谢。

表结构如下：

    <table><tr><td><img style="width:100px;"/></td>...(many more columns)...</tr></table>

Answer 1

我建议使用<div>%s。

尝试如下所示：

HTML：

<div id="gallery-wrapper">
    <div><img src="..." /></div>
    ...
    <div><img src="..." /></div>
</div>

css:

div#gallery-wrapper{
    width:100%;
    height:100px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
}
div#gallery-wrapper > div{
   display:inline-block;
   width:100px;
   height:100px;
}

附注:实际上，还有很多其他方法可以做到这一点。

Answer 2

这是一个在错误的上下文中使用表的示例，以及为什么不推荐这样做。如果您一定要使用表格布局，那么将图像放在td内的div中，并设置div溢出。

  <table><tr><td><div class="imageDiv"><img style="width:100px;"/></div></td>...(many more columns)...</tr></table>

.imageDiv{overflow-x:scroll;}

Answer 3

我建议你使用jquery插件的jscrollpane窗格。

http://jscrollpane.kelvinluck.com/