1-image 2-image 3-image
Sie sind hier: Startseite > Templates > Responsive Tabelle

Responsive Tabellen

Wenn Tabellen die Klasse respTable erhalten, werden sie (einigermaßen) responsive.

Mit Tabellen ist das so eine Sache. Richtig responsive bekommt man sie eigentlich nur mit JS und/oder anderen Tricks. Mit reinem CSS, was wünschenswert wäre, bekommt man allerdings wiederum Probleme bei den Editoren, die zurzeit das Setzen von Data-Attributen nicht standardmäßig unterstützen.

Das heißt, die maximal angezeigte Breite ist 100% – alles darüber hinaus wird scrollbar. Bei Tablets und Smartphones müssen Sie den Inhalt durch ein Wischen nach rechts bzw. links sichtbar machen.

Bei der hier gezeigten Variante genügt es die Klasse zu vergeben. In allen anderen Fällen ist Handarbeit im Quelltext gefragt. 

Fügen Sie diese Zeilen zur Erstellung einer 4-spaltigen Tabelle per drag'n'drop ein: 4 x 25% = 100%. Wünschen Sie eine andere Spaltenanzahl, so müssen Sie das Beispiel und die Werte entsprechend ändern.

<table class="respTable">
<tbody>
<tr>
<th style="width: 25%;">Fernsehtitel</th>
<th style="width: 25%;">Veröffentlichung</th>
<th style="width: 25%;">Jahre der <br>Handlung<span class="small"></span></th>
<th style="width: 25%;">Episoden<span class="small"></span></th>
</tr>
<tr>
<td>Raumschiff Enterprise</td>
<td>1966 – 1969</td>
<td>2265 – 2269</td>
<td> 79</td>
</tr>
<tr>
<td>Die Enterprise</td>
<td>1973 – 1974</td>
<td>2269 – 2270</td>
<td> 22</td>
</tr>
<tr>
<td>Raumschiff Enterprise –<br>Das nächste Jahrhundert</td>
<td>1987 – 1994</td>
<td>2364 – 2370</td>
<td> 178</td>
</tr>
<tr>
<td>Star Trek: <br>Deep Space Nine</td>
<td>1993 – 1999</td>
<td>2369 – 2375</td>
<td> 176</td>
</tr>
</tbody>
</table>
<p> <span style="font-size: 8pt;">© 2019, https://de.wikipedia.org/wiki/Star_Trek</span></p>

Please activate JavaScript in your browser.

» Sitemap

Aufgrund der neuen Cookies-Verordnung der EU: Einige Bereiche dieser Website benötigen zu ihrer Funktion neben den sogenannten SESSION-Cookies, auch Cookies, die personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient und / oder Ihr Gerät (PC oder Mobil-Gerät) beziehen (also: personenbezogenen Daten). Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, evtl. weitere Cookies auf Ihrem Rechner zu platzieren.

Erfahren Sie mehr über diese Cookies in der Cookie Policy.