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>