Elemente mit festen Breitenangaben
In früheren Zeiten wurden auf Webseiten einigen Elementen häufig feste Breiten zugewiesen, z.B. Tabellen. Meistens wurden sogar den einzelnen Spalten feste Breiten vorgegeben, damit die Tabelle so aussieht, wie man es sich vorstellt. Mit dem Grundgedanken von responsive Webdesign sind feste Breitenangaben für die Elemente einer Webseite nicht mehr vereinbar, da hierbei die Inhalte bei allen Anzeigegrößen ein gutes Aussehen haben sollen. Das betrifft neben Tabellen auch alle übrigen Elemente, die auf der Webseite vorhanden sind.
Der Anzeigebereich variiert nämlich zu stark und liegt häufig in einem Bereich von 300 - 1200 Pixeln. Hat man eine Tabelle mit einer Breite von z.B. 700 Pixeln, werden im Browser bei kleineren Anzeigebereichen automatisch Scrollleisten eingeblendet und man müsste die gesamte Seite scrollen, um alle Inhalte der Tabelle zu sehen. Die Seite wäre somit nicht mehr voll responsive.
Scrollleisten an den Elementen
Eine einfache Lösung kann sein, Scrollleisten direkt an den Elementen, in diesem Beispiel an der Tabelle, einblenden zu lassen. So kann man gezielt die Tabelle scrollen. Die übrigen Inhalte der Seite werden dadurch nicht bewegt bzw. es wird nicht die gesamte Seite gescrollt. Hierfür könnte man folgenden CSS-Code verwenden.
table {
max-width: 100%;
display: block;
overflow-x: auto;
}Der CSS-Code bewirkt, dass die Tabelle maximal 100% breit sein können. Die Einstellung display: block; ist notwendig, damit die Scrollleisten angezeigt werden können. Mit der Einstellung overflow-x: auto; wird festgelegt, dass wenn die Tabellen nicht breit genug sind, automatisch Scrollleisten eingeblendet werden. In diesem Beispiel werden horizontale Scrollleisten eingeblendet. Denkbar sind auch vertikale Scrollleisten, wenn man z.B. ein Element in der Höhe beschränken möchte.