我怎样才能用普通的HTML / CSS做一个“漂亮”的表溢出(How can I make a “pretty” table overflow with plain HTML/CSS)

我怎样才能用普通的HTML / CSS做一个“漂亮”的表溢出(How can I make a “pretty” table overflow with plain HTML/CSS)

我在div中有两行单词（基本文本输出，没有表格等），例如

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

现在，这些列表可能会很长，并且在小型监视器上可以轻松拆分格式。 它看起来像这样：

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

但我想这样做：

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

我怎样才能做到这一点？ 我想使用纯HTML功能，没有Javascript的依赖。

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.

最满意答案

有几种方法可以解决这个问题：

1）使用一张桌子。 将表放入容器DIV中，并将overflow-x CSS属性设置为auto 。 当屏幕空间太小时，这将使您的桌面向左和向右滚动。

2）包装div的每一行是一个容器（ div ， span等），并将其white-space CSS属性设置为nowrap 。 在屏幕空间太小的情况下，在包含的DIV上再次使用CSS属性overflow-x: auto来使容器滚动。

3）而不是两行文本，使每个名称/值对在自己的DIV中，并将DIV浮动到左侧。 当内容包装时，这一对将包装到下一行：

<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 */ }

呈现如下：

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

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