Bootstrap: Responsive Tabelle mit fixierter Spalte

Responsive Tabellen in BootstrapIch bin ja ein großer Bootstrap-Fan, deswegen nachfolgend eine kleine Anleitung, wie man in Bootstrap eine responsive Tabelle mit einer fixierten Spalte einfügt. Da ich das selbst gebraucht habe, möchte ich euch an dieser Stelle einfach einmal die Such- und Ausprobierarbeit sparen und zeigen, was ich gefunden habe und was auch funktioniert hat.

Fündig geworden bin ich hier auf stackoverflow.com, wo User koala_dev eine funktionierende Lösung gepostet hat. Das ganze findet ihr auch noch einmal zum Ausprobieren und Experimentieren auf http://jsfiddle.net/koala_dev/nt7fd965/2/.

Eine responsive Tabelle, die auf einem Smartphone dann als Scroll-Tabelle dargestellt wird, erreicht man ja schon mit den Bord-Mitteln von Bootstrap, in dem man eine normale Tabelle mit folgendem Div umhüllt:

Zusätzlich muss nun noch folgender Code in die CSS-Datei:

Und zu guter Letzt braucht man auch noch etwas JavaScript. Ich habe leider keine andere Lösung gefunden, die auf JavaScript verzichtet. Persönlich halte ich es lieber so einfach wie möglich, falls euch also eine andere Lösung ohne JavaScript vorliegt und diese auch funktioniert, freue ich mich natürlich über einen Kommentar.

Der nachfolgende Java-Script muss nach der Tabelle im Quellcode eingefügt werden, am besten setzt man ihn einfach vor dem schließenden </body-Tag>:

Das war es auch schon, nun solltet ihr eine responsive Tabelle haben, bei der die erste Spalte fixiert ist. Eignet sich beispielsweise prima für Vergleichstabellen, in denen in der ersten Spalte die unterschiedlichen Eigenschaften stehen.

Scroll-Balken in der responsiven Ansicht darstellen

Eines hat mich bei der responsiven Tabelle aber noch gestört. Auf der mobilen Ansicht, sah man nicht sofort, dass es sich hier um eine Tabelle handelt, die scrollbar ist, mit der man also interagieren kann. Ich wollte, dass immer eine Scrollbar in der reponsiven Ansicht angezeigt wird. Eine Lösung habe ich ebenfalls auf stackoverflow.com gefunden. Einfach nachfolgenden Code in die das CSS-Stylesheet eingeben:

Generell muss an dieser Stelle noch sagen, dass ich selbst kein ausgebildeter Web-Entwickler bin. Ob diese Lösungen jetzt schön und sauber sind, kann ich leider nicht bewerten. Sie funktionieren auf jeden Fall und das war mir am Wichtigsten. Falls ihr in diesem Bereich mehr Erfahrung und vielleicht auch einen besseren Lösungsansatz habt, dann freue ich mich über eure Kommentare. Für alle andere hoffe ich, dass dieser Beitrag euch etwas Zeit gespart und euch weitergeholfen hat.

Deine Meinung ist uns wichtig

*

Newsletter abonnieren (Jederzeit wieder abbestellbar)