Question

I am building an dynamically created gallery, where ajax/php fetch some images and then load those images into a dynamically created table. I have a set width for this table and I want the overflow only in the x direction. The issue is that the table row (tr) seems to wrap itself. I have tried using the css overflow-x property, I have tried manipulating the table width (which is inside a div), and I have tried using css to turn off wrapping. None of this helps and the table scrolls vertically instead of horizontally. Any help would be much appreciated. Thanks.

Here is the table structure:

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

Answer 1

I’d recommend to use <div>s.

Try something like this:

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. There are actually many other ways to do this.