Tabelle in Tabs-Widget - responsive Darstellung

    Guten Tag,

    ich habe in ein Tabs-Widget eine Tabelle mit drei Spalten eingefügt. Ist der Bildschirm groß genug sieht auch alles prima aus. Grundsätzlich greift auch das Responsive-Design, aber irgendwann (z. B. auf dem Handy) wird dann die rechte Spalte abgeschnitten. Je nachdem wie breit der Inhalt der ersten beiden Spalten ist, sieht man die dritte Spalte dann ggf. gar nicht mehr.

    Benutze ich für die gleiche Tabelle (also für den Inhalt :) das Widget "Tabellarische Daten", wird unter der Tabelle ein Scrollbalken eingeblendet. Ich hab mal eine Beispielseite mit beiden Varianten angelegt: https://hosting.zeta-producer.com/4436101408/index.html

    Nun meine Frage: Läßt sich das mit dem Scrollbalken auch innerhalb eines anderen Widgets realisieren? Oder kann ich das Abschneiden der Spalten (in einen anderen Widget!!!) sonstirgendwie vermeiden?

    Gruß Marina
    PS: Es wäre ohnehin schön, wenn man die Widgets schachteln könnte (hier also z.B. das Widget "Tabellarische Daten" in das Widget "Tabs". Das würde ungeahnte Möglichkeiten eröffnen. 8o

    Ich nutze wie im Beispiel
    Titel: Zeta Producer 13 / Version: 13.3.0.0 / Versionsname: Business
    Layout: Contemporary Responsive

    Hallo,

    das geht im Widget "Tabs" nur mit einem "manuellen Eingriff".
    Ich hätte da aber eben eine Idee, die evtl. für dich funktionieren könnte.

    Eben (zu meiner eigenen Verwunderung) auch auf die schnelle erfolgreich getestet ;)

    Wenn du möchtest, dann poste hier mal den Quellcode von einem Tab (umschalten oben in der Leiste auf "HTML-Quelltext anzeigen").
    Ich überarbeite diesen dann, und schreib dir dann das Ergebnis und die Lösung dazu.

    Gruß
    Jochen

    Hallo Jochen,

    so schnell hab ich gar nicht meit einer Antwort gerechnet. Hier kommt der Quelltext:

    <table style="WIDTH: 80%">
    <tbody>
    <tr>
    <th>
    <p style="text-align: left">Kleingartenanlage</p></th>
    <th>
    <p style="text-align: left">Adresse</p></th>
    <th>
    <p style="text-align: left">Homepage</p></th></tr>
    <tr>
    <td>Am Buschkrug&nbsp;</td>
    <td>12359 Berlin, Buschkrugallee 175 </td>
    <td>
    <p><a href="http://www.kolonieambuschkrug.de" target="_blank">https://community.zeta-producer.com/www.kolonieambuschkrug.de</a></p></td></tr>
    <tr>
    <td>An der Kleinbahn</td>
    <td>12355 Berlin, Schneehuhnweg 4&nbsp;</td>
    <td>
    <p><a href="http://www.kleinbahn-berlin.de" target="_blank">https://community.zeta-producer.com/www.kleinbahn-berlin.de</a></p></td></tr>
    <tr>
    <td>Britzer Wiesen&nbsp;</td>
    <td>12359 Berlin, Parchimer Allee 3</td>
    <td>
    <p><a href="http://www.kolonie-britzer-wiesen.de">https://community.zeta-producer.com/www.kolonie-britzer-wiesen.de</a></p></td></tr>
    <tr>
    <td>Steingrube Weihmars Ruh</td>
    <td>12355 Berlin, Schönefelder Str. 150</td>
    <td>
    <p><a href="http://www.kolonie-britzer-wiesen.de/">https://community.zeta-producer.com/www.kolonie-britzer-wiesen.de</a></p></td></tr>
    <tr>
    <td></td>
    <td></td>
    <td></td></tr>
    <tr>
    <td></td>
    <td></td>
    <td></td></tr>
    <tr>
    <td></td>
    <td></td>
    <td></td></tr>
    <tr>
    <td></td>
    <td></td>
    <td></td></tr>
    <tr>
    <td></td>
    <td></td>
    <td></td></tr></tbody></table>

    Gruß Marina

    Ok, dann musst du mir jetzt nur Zeit geben, das ganze noch sauber auszuarbeiten und dir dann zu schreiben.

    Ich habe nähmlich eben dafür die "Holzhammermethode" angewendet, die ich aber so nicht unbedingt jemanden antun möchte ;)
    Und ich weiß auch, das dies bestimmt noch besser geht.

    Also, einfach ein wenig geduld bitte.
    Wenn ich heute nicht mehr dazukomme, dann bestimmt morgen.

    Gruß
    Jochen

    Ok, ging jetzt (glaube ich zumindest gerade) doch einfacher wie gedacht.
    Bitte füge mal folgenden Code (ohne Zeilennummer) in dein Projekt in das dementsprechende Tab, per HTML ein, und schreibe mir dann, ob das bei dir dann auch geht.

    Gruß
    Jochen

    Sehr gut :thumbup:

    Da kannst du jetzt diesen Code als "grundgerüst" für deinen anderen Tabs nehmen und dann dementsprechend die Inhalte abändern.

    Info dazu: Es ist in diesem Fall, einfach nur der aufruf der dementsprechenden CSS-Klasse des Wigets "Tabellarische Daten" dem bestehenden Code beigebracht worden.

    Gruß
    Jochen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden