How can I make a "pretty" table overflow with plain HTML/CSS

Question

I have two rows of words in a div (basic text output, no tables etc yet), e.g.

a b c d e f g h i 
1 2 3 4 5 6 7 8 9 

Now those lists can be very long and the format breaks easily on small monitors. It looks like this:

a b c d e f
g h i
1 2 3 4 5 6
7 8 9

But I'd like to have it like that:

a b c d e f
1 2 3 4 5 6

g h i
7 8 9

How can I achieve this? I would like to use plain HTML functionality, no Javascript dependencies.

Answer 1

A couple of ways you can approach this:

1) Use a table. Put the table inside a container DIV with the overflow-x CSS property set to auto. This will make your table scrollable left and right when the screen space is too small.

2) wrap each line of the div is a container (div, span, etc) and set its white-space CSS property to nowrap. And on the containing DIV, again use the CSS property overflow-x: auto to make the container scroll when screen space is too small.

3) instead of two lines of text, make each name/value pair in its own DIV, and float the DIVs to the left. When the content wraps, the pair will wrap to the next line:

<div class="floatMe">a<br>1</div>
<div class="floatMe">b<br>2</div>
<div class="floatMe">c<br>3</div>
...
<div class="floatMe">ZZZ<br>999</div>

.floatMe {
  float: left;
  /* add width, padding, margin, etc to taste */
}

Renders like this:

A B C D E F G H I J  K  L  M
1 2 3 4 5 6 7 8 9 10 11 12 13

N  O  P  Q  R  S
14 15 16 17 18 19