Wie kann ich einen "hübschen" Tabellenüberlauf mit reinem HTML/CSS machen

Ich habe zwei Reihen von Wörtern in einem div (grundlegende Textausgabe, keine Tabellen usw.), z.Wie kann ich einen "hübschen" Tabellenüberlauf mit reinem HTML/CSS machen

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

Jetzt können diese Listen sehr lang sein und das Format bricht leicht auf kleinen Monitoren. Es sieht wie folgt aus:

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

Aber ich möchte, dass es so haben:

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

g h i 
7 8 9

Wie kann ich das erreichen? Ich möchte einfache HTML-Funktionalität, keine Javascript-Abhängigkeiten verwenden.

Quelle

2015-06-12 undefined

benutzen Sie andere Sprachen? –

Darf die HTML-Struktur geändert werden? –

Nur HTML5/CSS3. Ich möchte Abhängigkeiten wie Javascript aufgrund von NoScript vermeiden. – undefined

Ein paar Möglichkeiten, wie Sie dies erreichen kann:

1) Verwenden Sie eine Tabelle. Legen Sie die Tabelle in ein Container-DIV mit der CSS-Eigenschaft overflow-x, die auf festgelegt ist. Dadurch wird die Tabelle nach links und rechts verschoben, wenn der Bildschirmbereich zu klein ist.

2) jede Zeile des div wickeln ist ein Container (div, span, etc) und seine white-space CSS-Eigenschaft auf nowrap. Und verwenden Sie auf dem enthaltenden DIV erneut die CSS-Eigenschaft overflow-x: auto, um den Container zu scrollen, wenn der Bildschirmbereich zu klein ist.

3) anstelle von zwei Zeilen Text, machen Sie jedes Name/Wert-Paar in einem eigenen DIV, und flotieren Sie die DIVs nach links. Wenn die Inhalte Wraps, wird wickelt das Paar in der nächsten Zeile:

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

diesen Renders wie:

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

Quelle

2015-06-12 20:10:36

dritte Option ist interessant, +1 für diese eine – aw04

Ich würde sagen, die erste ist die beste Option des Baumes, einfach weil, wenn es wie eine Ente aussieht, quakt es wie eine Ente und es verhält sich wie eine Ente, besser anrufen es ist eine Ente. Das heißt, Tabellen sind Tabellen. Lass das sein :) Aber das mag eine puristische Generation sein;) –

@GerardvanHelden Dem widerspreche ich nicht, und es mag in den meisten Fällen nicht gut passen, aber # 3 ist das einzige, das das fragliche Ergebnis erzielt – aw04

Sie erreichen dies eine großes line-height und ein negatives margin-bottom verwenden, die die line-height zu zweimal gleich sind :

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>

Quelle

2015-06-12 20:45:33

Wie kann ich einen "hübschen" Tabellenüberlauf mit reinem HTML/CSS machen

Antwort

Verwandte Themen