Tabellendarstellung im HTML

[Peter1010]

Ich habe folgenden HTML-Eintrag. Hier wird eine Checkbox mit einem Namen erzeugt. Jeder weitere Eintrag erscheint dann immer darunter. Um hier Platz zu sparen suche ich eine Lösung damit dieser Eintrag in Tabellenform dargestellt wird ( 3 Spalten mit 6 sichtbaren Zeilen. Befüllung 1. Zeile, von links nach rechts 2. Zeile wieder von links nach rechts usw. Ab der 7 Zeile soll dann rechts eine Skrollung erscheinen sodass hier dann unbegrenzte Zeilen folgen können. Maximale Breite der Tabelle 500 px.

Der bisherige HTML Code sieht so aus:

<!-- BEGIN: group -->
<div>
<input type="checkbox" name="groups[]" id="group_{group.id}" value="{group.id}" {group.chk} />
<label for="group_{group.id}">{group.name} <span style="color: #aaa; padding-left: 5px">({group.num})</span></label>
</div>
<!-- END: group -->

Bild dieser Darstellung in der Anlage

 

[Tronjer]

Und was genau war jetzt die Frage?

 

[Peter1010]

Derzeit werden alle Einträge in einer Spalte angezeigt. Ich möchte das diese auf drei Spalten aufgeteilt werden! Wenn mehr als 6 Zeilen gefüllte sind, sollten alle weiteren über eine Scrollung rechts erreichbar sein.

 

[Tronjer]

Vorab gesagt: Vergiss die Sache mit Tabellenlayout und Spalten, das wurde mit der Jahrtausendwende abgeschafft.

Derzeit werden alle Einträge in einer Spalte angezeigt.

Ich sehe da keine Spalte, sondern ein Div mit einem <input>-Element. Wenn du dem am Ende ein <br> verpasst und weitere Input-Felder hinzufügst, dann stehen diese untereinander. ;)

Ich möchte das diese auf drei Spalten aufgeteilt werden!

Dann tu das doch. Erzeuge zwei weitere Container, befülle diese mit Input-Feldern und floate sie per CSS.

Wenn mehr als 6 Zeilen gefüllte sind, sollten alle weiteren über eine Scrollung rechts erreichbar sein.

Das ließe sich auch. mit CSS bewerkstelligen. Gib den Containern eine feste Höhe, die Raum für sechs Zeilen lässt und setze ein overflow: scroll darauf.

 

[Peter1010]

Sorry ich kenne mich damit leider nicht so aus. Kannst du es mir anhand des Beispiels mal zeigen wie das aussehen soll. Ich füge hier mal die ganze HTML-Datei bei. Den entsprechend Befehl siehst du zwischen "Begin: Group" und "End: Group". Schon mal danke im Vorraus

 

[Tronjer]

Das ist keine reine HTML-Datei, sondern nur ein Teil eines Scripts, welches du von irgendwo her übernommen hast. Oben befindet sich ein propietäres jQuery-Plugin, und wahrscheinlich sollen die Daten ja auch an ein Backend durchgereicht und dort weiter verarbeitet werden. Willst du nun explizit dieses Script erweitern, oder bist du darauf im Netz gestoßen und suchst nach einer generellen Lösung anhand der vorherigen Problembeschreibung?

Das ist eine komplexere Aufgabe, die du mit den vorhanden Kenntnissen wahrscheinlich nicht lösen kannst, und es wird sich hier auch niemand finden, der das kostenlos für dich erledigt. Für solche Fälle gibt es die Jobbörse.

 

[Peter1010]

Ich möchte diese vorhandene Skript um diese Möglichkeit erweitern. In diesem Fall einfach nur die Darstellung verändern,

 

[Tronjer]

Gib doch mal einen Link zur Seite. Aus dem Code des Kontakt-Formulars lässt sich dessen Darstellung kaum ableiten.