Diese Seite enthält dieselbe überbreite Tabelle wie examples-fullwidth-scroll.html,
aber sie lädt nicht das scrolling
-Template dazu, auch nicht fullwidth
, sondern
vielmehr tablewidth
.
Wenn das Browserfenster nun schmaler als die (breite) Tabelle ist, entsteht eine überbreite Seite, die
horizontal gescrollt werden kann.
Dabei ergibt sich aber ein großes Problem gerade in Kombination mit dem tablewidth
-Template, das ja
die Pager-Buttons an der Tabelle ausrichtet: Die Buttons zum Weiterblättern stehen am rechten Tabellenrand und
sind daher zunächst gar nicht erreichbar, man muss erst ganz nach rechts scrollen, um weiterblättern zu können.
Dann muss man wiederum erst ganz nach links scrollen, um wieder rückwärts durch die Tabelle blättern zu können!
Dies ist also offensichtlich eine sehr ungünstige Konfiguration.
Für möglicherweise überbreite Tabellen sollte zunächst das tablewidth
-Template nicht verwendet werden,
sondern eher das fullwidth
-Template. Aber auch dann würde die ganze Seite scrollen, und man
könnte nur durch die Tabelle blättern, wenn man ganz nach links gescrollt hat.
Die Demo-Seite examples-fullwidth-scroll.html
wendet daher zusätzlich das scrolling
-Template an, mit dem allein die Tabelle gescrollt werden kann,
wobei der Rest der Seite einschließlich der Pager-Buttons immer im Viewport bleibt.
The Table
Name | Major | Sex | English | Japanese | Calculus | Geometry | More |
---|---|---|---|---|---|---|---|
Student01 | Languages | male | 80 | 70 | 75 | 80 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student02 | Mathematics | male | 90 | 88 | 100 | 90 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student03 | Languages | female | 85 | 95 | 80 | 85 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student04 | Languages | male | 60 | 55 | 100 | 100 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student05 | Languages | female | 68 | 80 | 95 | 80 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student06 | Mathematics | male | 100 | 99 | 100 | 90 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student07 | Mathematics | male | 85 | 68 | 90 | 90 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student08 | Languages | male | 100 | 90 | 90 | 85 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student09 | Mathematics | male | 80 | 50 | 65 | 75 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student10 | Languages | male | 85 | 100 | 100 | 90 | |
Student11 | Languages | male | 86 | 85 | 100 | 100 | |
Student12 | Mathematics | female | 100 | 75 | 70 | 85 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student13 | Languages | female | 100 | 80 | 100 | 90 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student14 | Languages | female | 50 | 45 | 55 | 90 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student15 | Languages | male | 95 | 35 | 100 | 90 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student16 | Languages | female | 100 | 50 | 30 | 70 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student17 | Languages | female | 80 | 100 | 55 | 65 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student18 | Mathematics | male | 30 | 49 | 55 | 75 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student19 | Languages | male | 68 | 90 | 88 | 70 | At vero eos et accusam et justo duo dolores et ea rebum. |