Responsive Tabelle

Hallo Community,

die Seite die ich zuzeit Überarbeite, braucht noch Responsive Tabellen ich habe mich auch daran versucht... aber leider nochnicht ganz geschafft derzeit Löse ich es unsauber über 2 artikel ... (2 verschiedene Tabellen und die werden ein und ausgeblendet)

Siehe bild:
Anhang 13400

Wollte frage ob es Möglich ist dies ohne 2 verschiedene artikel zu erstellen (tabellen)

Diese Sachen habe ich schon ausprobiert :

http://blog.kulturbanause.de/2012/06...ive-webdesign/

Möglichkeit 5 wäre eine Option , Möglichkeit 4 ist die bedienung an einem Smartphone einfach schrecklich ;-)
Bei Möglichkeit 5 klappt es leider nicht ich habe die JS/CSS eingebunden der Tabellen die Klasse gegeben und die variablen , jquery.mini eingefügt in ein js sqript und eingebunden ... weiß leider nicht was fehlt .... (hat es von euch jemand schonmal am laufen ?? in Contao

Die Seite:

http://neu.vdtf.de/ansprechpartner-bayern-nord.html (Dort kann man mal das Browserfenster klein und groß machen damit man sieht was gemeint ist )

MFG

Joey

Zitat:

---

Zitat von JoeyConta3

Bei Möglichkeit 5 klappt es leider nicht ich habe die JS/CSS eingebunden der Tabellen die Klasse gegeben und die variablen , jquery.mini eingefügt in ein js sqript und eingebunden ... weiß leider nicht was fehlt .... (hat es von euch jemand schonmal am laufen ?? in Contao

---

Hast du die Seite irgendwo online? Und beschreibe auch genau was du wo gemacht bzw. eingefügt hast.


Alternativ kannst du auch einfach folgendes JavaScript einfügen (jQuery Version):

PHP-Code:

---

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


---

Dadurch kann jede Tabelle horizontal gescrolled werden, wenn nicht genügend Platz ist. (Siehe auch https://community.contao.org/de/show...l=1#post314671 )

Hey

Ja die Seite ist Online ;-)
http://neu.vdtf.de/ansprechpartner-bayern-nord.html

Nach dieser Anleitung:

http://fooplugins.com/footable-demos/

Die 3 Dateien hochgeladen

footable.core.css
footable.standalone.css
footable.js

Layout richtiges gewählt , dann CSS datein eingebunden und bei eigener Java-sqript code das eingefügt


JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="{{env::files_url}}files/opensauce/js/js-ResponsiveBalken/footable.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
$('.footable').footable();
});
</script>

Dann 2 Beispiel tabellen eingefügt um zu schauen ob sich was tut : Link: http://fooplugins.com/plugins/footable-jquery/

<table class="footable" data-filter="#filter" data-page-size="5">
<thead>
<tr><th data-toggle="true">First Name</th><th data-sort-ignore="true">Last Name</th><th data-hide="phone,tablet">Job Title</th><th data-hide="phone,tablet" data-name="Date Of Birth">DOB</th><th data-hide="phone">Status</th></tr>
</thead>
</table>
<table class="footable">
<thead>
<tr><th>Name</th><th data-hide="phone,tablet">Phone</th><th data-hide="phone,tablet">Email</th></tr>
</thead>
<tbody>
<tr>
<td>Bob Builder</td>
<td>555-12345</td>
<td>bob@home.com</td>
</tr>
<tr>
<td>Bridget Jones</td>
<td>544-776655</td>
<td>bjones@mysite.com</td>
</tr>
<tr>
<td>Tom Cruise</td>
<td>555-99911</td>
<td>cruise1@crazy.com</td>
</tr>
</tbody>
</table>



Dein tipp Probier ich gleich mal aus wie das aussieht und sich bedienen lässt danke ;-)

Okay lol .... anscheinend hat das ganze damals auch schon funktioniert nur irgendwo was altes im cache hängen geblieben .... Danke ;-) (Gestern gemacht und dann keine lust mehr gehabt und pc aus :D heute nochnicht nachgeschaut ... schreib alles schritt für schritt auf und es ging schon :D )

Mal schauen wie ich die bilder als Einblende machen kann ;-)

Dein Code gefällt mir auch ;-) na mal schauen was dann der Praxistest sagt was bequemer is Danke

Hallo, wünsche allen einen schönen Sonntag.

Habe mit Tabellen meine Probleme.
Habe über ein neues Inhaltselement (Text) eine Tabelle eingefügt.
Hier der Link https://vorschau.wagyu-genetics.de/de/sperma.html
Habe dann im Seitenlayout Eigener JavaScript-Code, diesen Code eingefügt.

Code:

---

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

---

Eine Responsive Tabelle ist dabei aber nicht raus gekommen.
Muss ich da noch mehr machen oder habe ich einen Fehler drin?

mach die Seite in der Quelltextansicht auf (Strg+u) und Suche (Strg+f) nach ".wrap" - ich find da nix... wo ist Dein Code?

ich würde das nicht in das Layout packen - eher ins Template der Tabelle oder als "Zusatz-CE" - also Template "ce_html_table_responsive.html5" da das JS rein... CE HTML einfügen und bei Template das erstellte auswählen