Question

I’m looking for a way to create a scrollable DIV that does not wrap without using a table. Here’s what I’ve tried:

HTML:

<div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

CSS:

DIV { width: 100px; height: 50px; overflow: auto; }
UL LI { float: left; border: 1px solid; }

Fiddle: https://jsfiddle.net/JGZJj/

However, the list of items will still wrap to a new line once it passes the 100px div. If I try the same thing with a table, for example:

HTML:

<div>
    <table>
        <tr>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
        </tr>
    </table>
</div>

CSS:

DIV { width: 100px; height: 50px; overflow: auto; }
TR TD { border: 1px solid; }

Fiddle: https://jsfiddle.net/kWwER/

Then all items display on a single row and do not wrap. Is there a way to get this behavior without using a TABLE tag? Thanks!

Answer 1

If you change your CSS (assuming use of ul/li tags) from:

div { width: 100px; height: 50px; overflow: auto; }
li { border: 1px solid; }

to:

div { width: 100px; height: 50px; overflow-x: scroll; white-space: nowrap; }
li { border: 1px solid; display: inline; }

That should take care of it for you. Here’s the jsFiddle result.

As an aside: I’d like to add that you should avoid selectors like TR TD or UL LI whenever possible.

1. <li> and <td> tags should always follow <tr> and <ul> tags.
2. Descendant selectors are really expensive.

In these situations, you’re asking the browser to look for any <td> tag that’s any descendant of any <tr> tag, so it’s looking through every level of hierarchy beneath every <tr> tag. If you absolutely have to use descendants, try to limit them to one level of hierarchy by using a selector like tr > td. Even better would be to assign a class to the elements you want to modify, and write your CSS against that selector.