Tabellen automatisch umwandeln, sodass sie auf Mobilgeräten sinnvoll angezeigt werden.

Tabellen und Mobilgeräte sind immer so eine Sache. Kleine Tabellen lassen sich noch einigermaßen gut darstellen. Sobald die Tabelle aber ein paar Daten enthält, wird es auf Smartphones und Tablets eng. Oft ist die als mobiltauglich angesehene responsive Lösung des Problems horizontales Scrollen der Tabelle. In meinen Augen ist das selten eine gute Lösung, da praktisch durchgehend "umhergewischt" werden muss.
Tabellen sollen Daten übersichtlich darstellen - das tun sie dann meist nicht mehr.

Auf Desktop-PCs können Tabellen leicht zufriedenstellend dargestellt werden. Dort ist mehr Platz vorhanden. Man könnte auf die Idee kommen die Daten für Smartphones anders aufzubereiten. Unkompliziert ist dies beispielsweise zu erreichen, indem einfach von Hand zwei Tabellen in die anzuzeigende Seite der Internetseite geschrieben werden. Eine wird für Mobilgeräte ausgeblendet, die andere wird für Geräte mit großem Bildschirm ausgeblendet.

Etwas schöner - besonders wenn Die Daten der Tabelle geändert werden müssen - ist es, wenn es nur eine Tabelle gibt (meiner Erfahung nach führt es oft zu Fehlern, wenn Daten öfter als 1x vorhanden sind). Das umwandeln für Smartphones kann nämlich beispielsweise auch per JavaScript erledigt werden - dann gibt es nur 1 Ursprungstabelle. Hierfür möchte ich zwei Varianten vorstellen, die sich auch kombinieren lassen. Die erste ist nicht von mir.

Tabelle als Beispiel
Tabelle als Beispiel

Variante 1: Tabellenkopf im Bezug zu Zeilen

Hier finden Sie einen Codeschnipsel (externer Link), mit dem Sie eine Tabelle auf einer Seite so umbauen lassen können, das jede Zeile dem jeweiligen Tabellenkopf (Table Head) zugeordnet wird. Im Beispiel können so die Carporttypen pro Eigenschaft verglichen werden. Das sieht dann etwa so aus:

Tabelle für Mobilgeräte Variante 1
Vergleich der Spalten je Zeile - im konkreten Beispiel also Bewertung je Eigenschaft

Variante 2: Tabelle in Panels umbauen lassen

Variante 2 habe ich für ein Projekt geschrieben, in dem ich auch an anderen Stellen Panels von Bootstrap benutze (hier als Akkordeon). Daher hat sich die Verwendung angeboten - panels finde ich übersichtlich, wenn Sie für die Daten geeignet sind. Der Code lässt sich aber auch für andere Darstellungsarten anpassen.
Im Beispiel können so die Carporteigenschaften pro Carporttyp verglichen werden.

Tabelle für Mobilgeräte Variante 2
Vergleich der Zeilen je Spalte - im konkreten Beispiel also Eigenschaft mit Bewertung je Carport-Typ

Da sich im Beispiel die Kunden einen Überblick verschaffen können sollen, haben beide Varianten ihren Sinn. Live können Sie sich beide Beispiele hier ansehen (externer Link).

Hier der Code:

Die vorhandene Tabelle hat im beispiel die ID "vergleichstabelle". Zudem muss auf der Seite ein Div mit der ID "accordion" vorhanden sein. Bootstrap und jQuery werden benutzt.

Der Code funktioniert etwa so: erst wird ein Panel erstellt in welches die gesamte Tabelle kopiert wird, dann werden alle Spalten gelöscht, die in diesem Panel nicht erwünscht sind. Beim Bild oben bleiben dann noch die Spalte 0 und die Spalte 3. Das wird so lange wiederholt, bis die gesamte Tabelle in Panels verpackt ist und sollte mit allen Tabellen funktionieren.

HTML

 
<div class="hidden-xs hidden-sm">        
    <table id="vergleichstabelle">
        <thead>
            <tr>
                <th>Kategorie</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>Inhalt</tr>
            
        </tbody>
    </table>
</div>
 
<div id="mob" class="hidden-lg hidden-md">  
    <div class="panel-group" id="accordion">
        
    </div>
</div>
 

JavaScript mit jQuery

 
$(document).ready(function () {
    // Anzahl der nötigen Klone zählen
    var headColumnCount = $('#vergleichstabelle').find('thead th').length;
    // Klone der Tabelle erstellen
    for (i1 = 1; i1 < headColumnCount; i1++) {
 
        // Text für Panel aus Tabelle holen
        var name_kategorie_nr = i1 + 1;
        var acc_h4_text = $('#vergleichstabelle tr > th:nth-child(' + name_kategorie_nr + ')').text();
        // Accordion vorbereiten
        var accordion =
            '<div class="panel panel-default">' +
            '<div class="panel-heading col-kat-' + i1 + '" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i1 + '">' +
            '<h4 class="panel-title">' +
            '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + i1 + '">' +
            'Kategorie: ' + acc_h4_text + '</a>' +
            '</h4>' +
            '</div>' +
            ' <div id="collapse' + i1 + '" class="panel-collapse collapse">' +
            '<div class="panel-body">' +
            '</div>' +
            '</div>' +
            '</div>';
        $('#accordion').append(accordion);
        $('#vergleichstabelle').clone().appendTo('#collapse' + i1 + ' .panel-body').prop('id', 'tabelle' + i1);
        $('#tabelle' + i1).attr('class', 'generated_for_mobile2');
        var d = [];
        for (i = 0; i < headColumnCount; i++) {
            d.push(i + 1); // jede Spalte eine Nummer
        }
        for (i = 1; i < headColumnCount; i++) {
            var d1 = [...d]; // Kopie um d zu behalten
            $.each(d1, function (index, value) {
                // Klassen hinzufügen
                $('#tabelle' + i + ' tr > td:nth-child(' + value + ')').attr('class', 'td-column-' + i + '-' + value);
                $('#tabelle' + i + ' tr > th:nth-child(' + value + ')').attr('class', 'td-column-' + i + '-' + value);
            });
        }
    }
    for (i = 1; i < headColumnCount; i++) {
        var d1 = [...d]; // Kopie um d zu behalten
        d1.splice(0, 1); // was behalten werden soll, wird gelöscht: 0 und i
        d1.splice(i - 1, 1);
        $.each(d1, function (index, value) {
            // löschen, was als wert in d1 enthalten ist
            $('.td-column-' + i + '-' + value).each(function () {
                $(this).remove();
            })
        });
 
    }
});
 
Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.