schmale Tabelle in Spalten verteilen

[andreasandreas]

Guten Tag,

ich habe eine schmale Tabelle, die dynamisch erzeugt wird. Auf diesen Aufbau habe ich im wesentlichen keinen Einfluss, da ich das dazu verwendete Wordpress-Plugin nicht durchsteige.

Die entstehende Tabelle ist schmal und lang. Gibt es eine Möglichkeit, die Tabelle quasi "umbrechen" zu lassen und somit ein zweispaltiges Layout zu erreichen?

In etwa wie folgt...

zur Zeit:
-----------
|1*|******|
-----------
-----------
|2*|******|
-----------
-----------
|3*|******|
-----------
-----------
|4*|******|
-----------
-----------
|5*|******|
-----------

geplant
----------- -----------
|1*|******| |4*|******|
----------- -----------
----------- -----------
|2*|******| |5*|******|
----------- -----------
-----------
|3*|******|
-----------

Vielen Dank

[Matthias Apsel]

Om nah hoo pez nyeetz, andreasandreas!

nein.

Eine Tabelle ist in HTML zeilenweise organisiert. Du möchtest, dass zum Beispiel Zeile 2 und Zeile 7 eine (neue) gemeinsame Zeile bilden. Dies ist nicht möglich.

Es wäre aber denkbar 2 verschiedene Tabellen zu erzeugen und die via CSS nebeneinander darzustellen.

Bedenke aber, dass Tabellen nur für die Darstellung tabellarischer Daten gedacht sind.

Matthias

[suit]

nein.

Eine Tabelle ist in HTML zeilenweise organisiert. Du möchtest, dass zum Beispiel Zeile 2 und Zeile 7 eine (neue) gemeinsame Zeile bilden. Dies ist nicht möglich.

tr {  
  float: left;  
  width: 50%;  
}  
  
tr:nth-child(2n) {  
  clear: both;  
}

[Gunnar Bittersmann]

@@suit:

nuqneH

tr {

float: left;
  width: 50%;
}

tr:nth-child(2n) {
  clear: both;
}

  
\----------- -----------  
|1\*|\*\*\*\*\*\*| |2\*|\*\*\*\*\*\*|  
\----------- -----------  
\----------- -----------  
|3\*|\*\*\*\*\*\*| |4\*|\*\*\*\*\*\*|  
\----------- -----------  
\-----------  
|5\*|\*\*\*\*\*\*|  
\-----------  
  
war [nicht geplant](https://forum.selfhtml.org/?t=203235&m=1373739).  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[suit]

@@suit:

nuqneH

tr {

float: left;
  width: 50%;
}

tr:nth-child(2n) {
  clear: both;
}

>   
> ----------- -----------  
> |1\*|\*\*\*\*\*\*| |2\*|\*\*\*\*\*\*|  
> ----------- -----------  
> ----------- -----------  
> |3\*|\*\*\*\*\*\*| |4\*|\*\*\*\*\*\*|  
> ----------- -----------  
> -----------  
> |5\*|\*\*\*\*\*\*|  
> -----------  
>   
> war [nicht geplant](https://forum.selfhtml.org/?t=203235&m=1373739).  
  
Zu ungenau gelesen - aber ich kann noch einiges aus dem Ärmel schütteln: <http://www.w3.org/TR/css3-multicol/>

[Gunnar Bittersmann]

@@suit:

nuqneH

Zu ungenau gelesen - aber ich kann noch einiges aus dem Ärmel schütteln: http://www.w3.org/TR/css3-multicol/

Das hab ich schon aus meinem Ärmel geschüttelt. ;-)

Qapla'

[suit]

Zu ungenau gelesen - aber ich kann noch einiges aus dem Ärmel schütteln: http://www.w3.org/TR/css3-multicol/

Das hab ich schon aus meinem Ärmel geschüttelt. ;-)

Ich dem von dir verlinkten Thread hab' aber auch ich zuerst geschüttelt :D

[Gunnar Bittersmann]

@@suit:

nuqneH

Ich dem von dir verlinkten Thread hab' aber auch ich zuerst geschüttelt :D

„Punkt für dich.“ ;-)

Qapla'

[suit]

Ich dem von dir verlinkten Thread hab' aber auch ich zuerst geschüttelt :D

„Punkt für dich.“ ;-)

Also von dir hätte ich bei einem Zitat eine saubere Quellenangabe oder zumindest einen Urhebernachweis erwartet :p

[Gunnar Bittersmann]

@@suit:

nuqneH

Also von dir hätte ich bei einem Zitat eine saubere Quellenangabe oder zumindest einen Urhebernachweis erwartet :p

Oh, ’tschuljung. Wird prompt nachgeliefert: [ibid.] ;-)

Qapla'

[andreasandreas]

Das ging ja ratz fatz, mit ~~~html <div style="-moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 1em; -webkit-column-gap: 1em;">

  
Vielen Dank also!

[suit]

Das ging ja ratz fatz, mit ~~~html

<div style="-moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 1em; -webkit-column-gap: 1em;">

  
Du solltest aber auch jeden Fall die eigentliche Eigenschaft auch dazupacken - `column-count`{:.language-css} und `column-gap`{:.language-css} wird über kurz oder lang in anderen Engines implementiert werden.

[andreasandreas]

Vielen Dank die Herrschaften für die fixen Antworten. Das ist schonmal gutes Material, vielleicht findet sich so ein Weg.

[Gunnar Bittersmann]

@@andreasandreas:

nuqneH

vielleicht findet sich so ein Weg.

Und wenn du in einer Sackgasse steckst, benutzt du entweder einen unfähigen Browser wie Opera* oder du hast die display-Eigenschaften von "table-*" nicht auf "block" bzw. "inline-block" gesetzt.

Qapla'

* VBG

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

nein.

Du solltest es besser wissen. Natürlich geht das.

Du möchtest, dass zum Beispiel Zeile 2 und Zeile 7 eine (neue) gemeinsame Zeile bilden. Dies ist nicht möglich.

Doch, wenn man dafür sorgt, dass alle tr dieselbe Höhe haben.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Ich gelobe, zukünftig nicht vorschnell zu antworten, sondern auch die Möglichkeiten von CSS3 in meine Überlegungen einzubeziehen.

colums ignoriere ich regelmäßig, weil ich noch nicht in die Verlegenheit gekommen bin, dies anzuwenden. Ich stelle es mir auch schwierig vor, ein solches Layout, was über ein normales Zeitungslayout hinausgeht (z.B. eine Spalte Navigation, eine Spalte Inhalt) für alte Browser zu simulieren, zumal man wohl auch noch keine Spaltenumbrüche erzwingen kann.

Zur Erstfestigung werde ich im Wiki bei Gelegenheit die entsprechende Seite bearbeiten.

Matthias