This example page holds the same table as examples-fullwidth-scroll.html, only it
does not use the scrolling
or fullwidth
template, but it does use the
tablewidth
template.
If the window is narrower than the table, this results in a whole page that is scrollable in order to be able to see the whole table. But as you can see here, there's a problem: Since the pager buttons in tablewidth preset are aligned with the table, and if your window is narrower that the table, you can't even see the buttons for switching to the next pages without scrolling all the way to the right. And if you do so, you'll have to scroll back to the left in order to reach the buttons for switching to previous pages.
So this is clearly not a good configuration.
For tables this wide which might overflow, the template scrolling
is much better suited,
which may optionally be combined with the fullwidth
template as demonstrated in
examples-fullwidth-scroll.html.
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. |