Responsiver Warenkorb

Komplexe Tabellen auf kleinen Bildschirmen darzustellen ist nicht gerade einfach. Bootstrap 3.x Tabellen mit der .table-responsive Klasse werden einfach in einen horizontal scrollbaren Container gepackt. Das ist für einen Warenkorb z.B. nicht besonderns nützlich.

Vielleicht kommt ein tabellarischer Warenkorb auch aus der Mode und Entwickler stellen Artikel als Listenblöcke dar. Ich find Tabellen aber immer noch geeignet dafür und um das auch für die mobile Anzeige verwenden zu können, musste eine Lösung her.

Hier ist erst einmal eine vereinfachte Darstellung für breitere Bildschirme.

Für kleinere Bildschirme wird die Tabelle via CSS in eine Zweispaltige Schlüssel/Wert Tabelle umgewandelt.

Als erstes müssen alle Tabellenelemente wie tr und td mit display:table normalisiert werden. Dann werden die Tabellenspalten via CSS (td:before) aus dem titel Attribute der jeweiligen Zelle sichtbar gemacht und diese Elemente als table-cell formatiert.

<td title="Amount">3</td>

/* show table headers from title attribute */
td[title]:before{
    content: attr(title) ": ";
}

/* format the faux table headers */
td:before{
    white-space:nowrap;
    width: 50%;
    display:table-cell;
    text-align: left;
}

Den Rest bitte in den Codepen Beispielen nachschauen.

Ich denke das ist eine ganz praktikable Lösung.