Sind Tabellen responsiv?

[JürgenB]

Hallo Lars,

hier habe ich eine Tabelle, die bei schmalen Viewports umformatiert wird:

https://www.j-berkemeier.de/TableSort_Beispiel3.html

Die Seite ist eigentlich ein Performance-Test für den Tabellensortierer und die recht große Tabelle wird per Javascript erstellt, daher hier noch ein Auszug aus dem Quelltext:

/* Responsive Tabelle */
@media screen and (max-width: 50em) {
	.restab, .restab caption, .restab thead, .restab tbody, .restab tfoot, .restab tr { display: block; }
	.restab, .restab td, .restab th { margin:0 }
	.restab tr { border-bottom: 2px solid #000; }
	/* .restab td:nth-child(1), .restab th:nth-child(1) { display:block } */
	.restab td::before { content: attr(title)": "; }
	.restab tfoot td::before { content: ""; }
	.restab td, .restab th { display: inline-block; padding: .2em; text-align: left; }
	.restab td, .restab th { min-width: 40%; }
	.restab th { margin-right: -0.2em; }
}
@media screen and (max-width: 33em) {
	.restab td, .restab th { display: block; }
}

<table id="T1" class="restab">
 <thead>
  <tr>
   <th class="sortierbar">Spalte 1</th>
   <th class="sortierbar sortiere+">Spalte 2</th>
   <th class="sortierbar">Spalte 3</th>
   <th class="sortierbar">Spalte 4</th>
   <th class="sortierbar">Spalte 5</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td title="Spalte 1">239</td>
   <td title="Spalte 2">1.1969160583467087</td>
   <td title="Spalte 3">228.97249171078371 x</td>
   <td title="Spalte 4">6. 12. 1996</td>
   <td title="Spalte 5">jCD</td>
  </tr>
  <tr>
   <td title="Spalte 1">-12</td>
   <td title="Spalte 2">1.19931742939261</td>
   <td title="Spalte 3">7.10680045343437 x</td>
   <td title="Spalte 4">31. 7. 2009</td>
   <td title="Spalte 5">7af</td></tr>
...

Die Tabellenelemente werden je nach Breite zu Inline-Blockelementen oder Blockelementen gemacht und so neben oder untereinander angeordnet. Um die Zuordnung zu den Spaltenüberschriften zu behalten, hat jede Zelle ihre Spaltenüberschrift als title-Attribut bekommen. Per css wird bei schmalen Viewports das title-Attribut dann angezeigt.

Sie es dir mal an. Dazu musst du das Browserfenster schmaler oder breiter machen.

Ich habe die Breakpoints auf 33 und 50 em gelegt, weil das bei mir so passt. Du müsstest das bei dir anpassen.

Gruß
Jürgen