Responsive Tabellen

Trotz strenger Einhaltung der "@media-Regeln" für responsives Webdesign, werden Tabellen häufig in mobilen Geräten, z. B. Smartphones, nicht korrekt dargestellt. Dieses Problem entsteht meist, wenn sich zu lange Wörter im Text der Tabellenzellen befinden, so dass der Text nicht umgebrochen werden kann, weil Leerstellen fehlen. In diesem Fall werden Tabellen radikal rechts abgeschnitten.

Die einzige Lösung dafür ist, den Tabellen Rollbalken zu verpassen, um sie auf kleinen Bildschirmen horizontal scrollen zu können. Mit ein wenig CSS und einer kurzen Anweisung im HTML-Code können horizontal scrollbare Tabellen erzeugt werden.

Die folgende geniale Lösung dazu stammt von kulturbanause.de:

CSS Code

table { /* Styling der Tabelle */ }

.table-scrollable {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

HTML Code

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

Für den Betrieb unserer Webseite nutzen wir Cookies. Bei Ablehnung, stehen möglicherweise nicht mehr alle Funktionalitäten der Seite zur Verfügung.