Responsive Tabellen mit CSS

  • Hi Leutz
    rein theoretisch soll es ja funktionieren, mit dem Ausblenden von nicht so wichtigen Spalten :huh:
    Aber ich brauch da wohl noch einen Denkanstoß
    Meine Tabelle:

    Code
    <table>    <thead>        <tr>            <th class="numeric" >StartNr.</th>            <th class="numeric" >Name, Vorname</th>            <th class="numeric" >Kennzahl</th>            <th class="numeric" >Wettkampf</th>            <th class="numeric" >Klasse</th>            <th class="numeric" >Start</th>            <th class="numeric" >Zeit</th>            <th class="numeric" >M/E</th>            <th class="numeric" >Stand</th>            <th class="numeric" >Erg.<br /> Einzel</th>            <th class="numeric" >Erg.<br /> Team</th>            <th class="numeric" >Rang <br /> Einzel</th>            <th class="numeric" >Rang <br /> Team</th>        </tr>    </thead        <tbody>            <tr>            <td class="numeric" >2907</td>            <td class="numeric" >Gützkow, Jürgen&nbsp;</td>            <td class="numeric" >1.19.74</td>            <td class="numeric" >Luftgewehr sitzend Auflage</td>            <td class="numeric" >Senioren C</td>            <td class="numeric" >21.06.2016</td>            <td class="numeric" >13:00</td>            <td class="numeric" >M</td>            <td class="numeric" >36</td>            <td class="numeric" >304,3</td>            <td class="numeric" >920,3</td>            <td class="numeric" >59/69</td>            <td class="numeric" >32/41</td>        </tr>    </tbody></table>


    Der dazugehörige CSS Code:


    Ist denn mein Ding so richtig :?:
    Nur was ich noch nicht so ganz peile ist die Kurve von der Tabelle zur CSS :whistling:


    Wenn mir da einer beim Denken hilft, wäre das toll beer

  • Das ist nicht responsive, da sich die Tabelle nicht wirklich anpasst und Du Inhalte in kleinen Breakpoints unterschlägst um alles darstellen zu können.


    Ich habe damit gute Erfahrungen gemacht und es ist weitaus professioneller.


    http://bloggerschmidt.de/2015/…ive-Tabellen-mit-CSS.html

  • @Indigo66
    Hab mir das ganze mal eben auf die Schnelle die Tabelle "unsere Schützen LM 2016" dahingehend umgebaut.
    Macht aber leider noch nicht was es soll fie
    Und zu allem Überfluss muss ich jetzt auch noch schaffen gehen.
    Ich mach dann mal so gegen 23:00 weiter, erst mal vielen Dank für den Hinweis.

  • OK funktioniert aber wirklich responsive ist das nicht.
    Es ist ja nicht das Ziel, das sich der Smartphone-User zu tode scrollt.
    Das Drehen, da war wohl der Wunsch der Vater des Gedanken.


    Werde mich also wieder intensiv mit dem Beispiel von elvery.net beschäftigen.

  • Auch nur als Tipp: Footable. Für deine Belange würde ich Version 2 empfehlen, auch, da die Doku etwas klarer ist und man die Tabellen "in echt" im Seitenquelltext der Demos sieht.
    http://fooplugins.com/footable-demos/
    Braucht JQuery.
    Zusätzlich Bootstrap-CSS machts jedenfalls leichter, wegen grundlegender Tabellen-Responsivität durch CSS-Klasse "table".


    Nix gegen Version3, ist aber lang nicht so übersichtlich und man sollte bevorzugt mit dynamisch generierten JSON-Datas arbeiten. Musste jedenfalls ziemlich kämpfen, auch mit Bugs, bevor ich meine erste JHtml-Joomla-KLasse einsetzbar fertig hatte.