CODEWITHSUNDEEP
htmlcss
undefined
undefined

Reputation: 333

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

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.

Upvotes: 8

Views: 477

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You can accomplish this using a large line-height and a negative margin-bottom that's equal to twice the line-height:

div {
  font-size: 20px;
  width: 100px;
  padding: 0.5em;
  line-height: 4em;
  margin-bottom: -8em;
  font-family: monospace;
}
<div>a b c d e f g h i</div>
<div>1 2 3 4 5 6 7 8 9</div>

Upvotes: 0

Jeff Clarke
Jeff Clarke

Reputation: 1397

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

Upvotes: 7

Related Questions