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;
}

P.S。实际上还有很多其他方法可以做到这一点。

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

我建议你使用jquroll插件的jscrollpane。

http://jscrollpane.kelvinluck.com/

Answer 4

设置宽度和溢出不是为了表，而是为了表格周围的div，以便表格可以在这个div中滚动：

<div style="width:1000px; overflow-x:scroll;"><table>...</table></div>

奇怪的HTML行包装

4 个答案: