Responsive Tabellen

Wenn Sie in Unterseiten oder in der Artikelbeschreibung mit Tabellen arbeiten, so können Sie diese mit ganz einfachen Schritten optisch gestalten und auch Responsive darstellen.

Allgemeine Angaben

Das im apt-shop standardmäßig verwendete Bootstrap Framework bietet einfache Funktionen um Ihre Tabellen zu gestalten. Geben Sie dazu der Tabelle die CSS Klasse table:

<table class="table"></table>

Sie können dies auch im HTML Editor machen, wenn Sie dort eine Tabelle hinzufügen/bearbeiten:

 

Responsive Tabellen

Wenn Sie Tabellen auch mobil optimiert darstellen wollen, dann setzen Sie einen div container mit der Klasse table-responsive um die Tabelle:

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

gestreifte Zeilen

Möchten Sie jede 2. Zeile farblich unterlegen, so geben Sie zusätzlich die CSS Klasse table-striped an:

<table class="table table-striped"></table>

Tabelle mit Rahmen

Möchten Sie einen Rahmen um die Tabelle/Zellen angeben, so geben Sie zusätzlich die CSS Klasse table-bordered an:

<table class="table table-bordered"></table>

Mouseover in den Zeilen

Sollen die Zeilen beim Mouseover mit einer Hintergrundfarbe hinterlegt werden, so geben Sie zusätzlich die CSS Klasse table-hover an:

<table class="table table-hover"></table>

Weitere Optionen

Es gibt noch weitere Optionen zur Darstellung von Tabellen: Hier finden Sie die Informationen dazu.