0

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

这是表结构：

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

4 回答 4

2

我建议使用<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;
}

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

于 2012-10-20T13:33:14.457 回答
1

这是在错误上下文中使用表的示例以及不推荐使用的原因。如果您绝对必须使用表格布局，则将图像放在 td 内的 div 中并设置 div 溢出。

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

.imageDiv{overflow-x:scroll;}
于 2012-10-20T13:27:48.190 回答
1

我建议您使用 jquery 插件的 jscrollpane。

http://jscrollpane.kelvinluck.com/

于 2012-10-20T13:43:10.763 回答
0

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

<div style="width:1000px; overflow-x:scroll;"><table>...</table></div>
于 2012-10-20T13:32:56.620 回答