image-02image-03image-01
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

Wir möchten gerne Cookies auf Ihrem Rechner platzieren, um uns zu helfen diese Website zu verbessern. Erfahren sie mehr über diese Cookies in der Datenschutzerklärung. Falls Sie trotzdem datenschutzrechtliche Bedenken haben, nutzen Sie bitte diese Webseite nicht - oder nur auf eigene Verantwortung. Sie können auch den entsprechenden Button wählen. - Danke für Ihr Verständnis!