Tabellen im Responsive

[Birden]

Hallo

Wie macht ihr das mit Tabellen in Responsive Seiten?

[stefan-at-work]

Da führen viele Wege nach Rom...manche auch über Paderborn. Aber vielleicht helfen Dir diese Ansätze

[Birden]

Oh, weh!

[Birden]

Dies finde ich einen guten Ansatz. Hab es nur noch nicht im Contao zum laufen bekommen.

[holzibus]

Hallo, ich habe gerade die Beschreibung aus dem Link von Birden auch probiert, jedoch hat es bei mir auch nicht funktioniert.
Vielleicht hat jemand schon eine lauffähige Version im Einsatz?

[Spooky]

Eigentlich reicht

$(document).ready( function()
{
    $('table').wrap('<div style="overflow-y:auto; max-width:100%;"></div>');
}); 

(jQuery Version)

[dhe]

Spooky: dazu braucht mein JQuery. Kann man auch gleich ins CSS schreiben (würde ich aber in die Media Queries packen)

[Spooky]

Spooky: dazu braucht mein JQuery.

Dient ja auch nur als Beispiel, wie man auf einfachstem Wege und ohne zusätzliches HTML im Source verhindern kann, dass Tabellen aus dem Layout ausbrechen auf Smartphones & Co. Ob man es in jQuery, MooTools oder native JavaScript umsetzt spielt ja keine große Rolle.

Kann man auch gleich ins CSS schreiben

Nein, dazu fehlt dir ja der zusätzliche Wrapper um die Table.

[andreasisaak]

Den Wrapper hast du im Contao aber -> div.ce_table

[Spooky]

Den Wrapper hast du im Contao aber -> div.ce_table

Nur wenn du das Content Element Table benutzt. Wenn du die Tabelle in einem Text Content Element eingefügt hast, oder du Tabellen von sonst irgendwo her im Source hast, dann nicht.

[holzibus]

Hallo Spooky,

sorry, dass ich noch einmal frage. Deinen o. a. Code - wo genau ist dieser einzupflegen?

Vielen Dank und schönen sonnigen Sonntag noch! :-)

...

Hat sich erledigt:

In den Einstellungen - Eigener Java-Script-Code:

<script>
$(document).ready( function()
{
    $('table').wrap('<div style="overflow-y:auto; max-width:100%;"></div>');
});
</script>

[Spooky]

Genau . Falls du MooTools und jQuery gleichzeitig auf der Seite verwendest, verwende stattdessen

jQuery(document).ready( function($)
{
    $('table').wrap('<div style="overflow-y:auto; max-width:100%;"></div>');
});