• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellen und responsive Nutzung

gnude

Neues Mitglied
Hallo HTML/CSS Entwicker,
mal eine Frage in die Runde.
Ich habe eine einfache HTML Tabelle, wohl noch HTML 3.2, die in eine Wordpress Seite eingebettet ist.
Die Tabelle ist sehr simpel aufgebaut. Allerdings ist sie durch die Wordpress Umgebung auf Smartphone nicht Scrollbar.
Daher auf einem mobiel Gerät wird sie einfach abgeschnitten und man sieht nicht was rechts ist.
Nun möchte ich die einfache Tabelle mit CSS soweit responsive gestalten das sie vernünftig angezeigt wird.
In Wordpress kann ich eigenen CSS unterbringen.
Hat jemand Tipps oder Links wo ich mit der Suche beginnen kann.
Würde gern über die ein oder andere Lösung diskutieren.....

HTML Code der Tabelle:
HTML:
<table border="1">
 <thead>
  <tr bgcolor="#BDBDBD">
  <th style="text-align: left;" width="150"><strong>Name</strong></th>
  <th width="150"></th>
  <th style="text-align: left;" width="150"><strong>Kontaktdaten</strong></th>
  <th width="150"></th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <td><strong>Name</strong></td>
  <td>Hans</td>
  <td><strong>Telefon</strong></td>
  <td>12345</td>
  </tr>
  <tr>
  <td><strong>Nachname</strong></td>
  <td>Wurst</td>
  <td><strong>eMail
  </strong></td>
  <td>testmail</td>
  </tr>
 </tbody>
</table>
 

Sempervivum

Senior HTML'ler
Eine Tabelle responsiv zu machen ist nicht ganz trivial aber man findet da einige Ansätze im Netz. Ich habe mich vor einiger Zeit mit einem davon beschäftigt. Hier eine Demo:
Code:
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial=scale=1.0" />
    <title>
        Responsive Table
    </title>
    <style>
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        table tr {
            background: #f8f8f8;
            border: 1px solid #ddd;
            padding: .35em;
        }

        table th,
        table td {
            padding: .625em;
            text-align: center;
        }

        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        @media screen and (max-width: 800px) {

            table {
                border: 0;
            }

            table thead {
                display: none;
            }

            table tr {
                border-bottom: 3px solid #ddd;
                display: block;
                margin-bottom: .625em;
            }

            table td {
                border-bottom: 1px solid #ddd;
                display: block;
                font-size: .8em;
                text-align: right;
            }

            table td:last-child {
                border-bottom: 0;
            }

            @media screen and (min-width: 701px) and (max-width: 800px) {
                tbody {
                    display: grid;
                    grid-template-columns: 2fr 1fr 1fr;
                }


                tbody tr:nth-child(3n-2) td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }

            }

            @media screen and (min-width: 561px) and (max-width: 700px) {
                tbody {
                    display: grid;
                    grid-template-columns: 2fr 1fr;
                }

                tbody tr:nth-child(2n-1) td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }

            @media screen and (max-width: 560px) {
                tbody {
                    display: grid;
                    grid-template-columns: 1fr;
                }

                tbody td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }
        }
    </style>
</head>

<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
    </table>
    <script>
        const tbl = document.querySelector('table');
        const headCells = tbl.rows[0].cells;
        for (let i = 1; i < tbl.rows.length; i++) {
            const row = tbl.rows[i];
            for (let j = 0; j < row.cells.length; j++) {
                const cell = row.cells[j];
                cell.setAttribute('data-label', headCells[j].textContent);
            }
        }
    </script>
</body>

</html>
Das responsive Verhalten funktioniert auch ohne das Javascript, dieses fügt nur die data-Attribute mit dem Text aus dem Header der Tabelle den einzelnen Tabellenzellen hinzu. Du kannst das auch händisch machen aber ich weiß nicht, ob man in WP data-Attribute einfügen kann. Das Skript hat den Vorteil, dass man Arbeit spart und Fehler vermeidet.
 

gnude

Neues Mitglied
Vielen Dank, ich probiere es mal aus.
Die Idee ist schonmal nicht schlecht. Der Tabelleninhalt wird hier nach unten zusammengeführt. Ich glaub das ist auf einem Mobilgerät die "beste" Lösung.
Tabelle sind wirklich ne Herausforderung da sie aus einer Zeit stammen wo ein Mobilgerät noch nicht erfunden war. Trotzdem sind sie jetzt da und man muss das beste draus machen.
Eine Lösung die die Felder weiter rechts nebeneinander hält gibt es vermutlich nicht oder?
 

Sempervivum

Senior HTML'ler
Eine Lösung die die Felder weiter rechts nebeneinander hält gibt es vermutlich nicht oder?
Mit CSS kann man sehr vieles machen und wahrscheinlich ist auch das machbar. Zunächst müsste man jedoch wissen, wie deine Tabelle genau aussieht. Was Du oben gepostet hast, ist ja etwas eigenwillig, weil die Daten auf zwei Zeilen verteilt sind und ich weiß nicht genau ob meine Demo darauf überhaupt passt.
 

gnude

Neues Mitglied
Ja die Tabelle die ich umsetzen möchte ist in der Tat etwas eigenwilling und ähnlich dem was ich gepostet habe.
Ich weiss das es ne eigenwillige Aufteileung ist.
 

MrMurphy

Senior HTML'ler
Würde gern über die ein oder andere Lösung diskutieren.....

@gnude: Deine Tabelle enthält zwei grundlegende Probleme, die eine responsive Darstellung verhindern:

1. HTML-Tabellen sind ausschließlich für Tabellendaten gedacht. Dein Inhalt ist hingegen eine Auflistung von Kontaktdaten.

2. Du füllst die Tabelle zudem vollkommen falsch. Außer in der Bildschirmansicht stehen die Daten in überhaupt keinem Zusammenhang.

Bei der korrekten Anwendung von HTML ist eine anschließende responsive Gestaltung kein Problem.

Tabelle sind wirklich ne Herausforderung da sie aus einer Zeit stammen wo ein Mobilgerät noch nicht erfunden war.

Tabellen waren immer nur für Tabellendaten gedacht, nicht zur Gestaltung von Webseiten. Mit Mobilgeräten hat das nichts zu tun.

Echte Tabellen mit korrekten Tabellendaten sind von sich aus nicht responsive, kommen in der Praxis aber auch so gut wie nie vor. In vielen aktuellen Lehrmaterialien werden sie entsprechend kaum noch behandelt.

Bis zum Jahr 2000 gab es kein CSS, deshalb wurden Tabellen (übrigens auch damals schon) zur Gestaltung mißbraucht. Das ging halt nicht anders. Seit dem Jahr 2000 ist das aber sachlich falsch, auch wenn viele Webseitenersteller das bis heute nicht akzeptieren wollen. Mit der Einführung von Flexbox und CSS-Grid gibt es überhaupt keinen Grund mehr, Tabellen zur Gestaltung zu mißbrauchen.

Deine Daten sind offensichtlich eine Kontaktliste. Sachlich ist deshalb das dl-Element mit seinen Kindelementen dt und dd am sinnvollsten. Damit ist dann auch eine responsive Darstellung kein Problem. Mit veraltetem oder sogar sachlich falsch angewendetem HTML können keine moderne, responsive Webseiten gestaltet werden.

Trotzdem sind sie jetzt da und man muss das beste draus machen.
Nein, du hast entschieden, die für deine Webseite zu verwenden.
 
Werbung:
Oben