Bootstrap: Responsive Tabelle mit fixierter Spalte

Ich 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:

<div class="table-responsive">
    <table>
       ...
    </table>
</div>

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

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

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>:

<script>
$(function(){
    var $table = $('.table');
    //Make a clone of our table
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

    //Remove everything except for first column
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    //Match the height of the rows to that of the original table's
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());
    });
});
</script>

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:

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}

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.