Template:Scrolling table/end
This set of templates ({{Scrolling table/top}}, {{Scrolling table/mid}}, {{Scrolling table/end}}) allows the production of tables that scroll horizontally when they're wider than the screen. This is especially useful in comparison tables.
Some notes:
- The scrollbar only appears if the table is actually wider than the page.
- This template allows up to 30 row headers passed as parameters to its
{{Scrolling table/top}}subtemplate, for convenience.- Extra row headers can be added using regular table syntax, between the
{{Scrolling table/top}}and the{{Scrolling table/mid}}subtemplates - Important: The {{Scrolling table/top}} subtemplate uses zero-width spaces to ensure newlines are added where appropriate. Be careful when editing them.
- Extra row headers can be added using regular table syntax, between the
Usage example
The following code:
<syntaxhighlight lang="wikitext">
| top header 1 |
|---|
| left header 1 |
| left header 2 |
| ... |
| left header 30 |
| left header 31 (extra) |
| top header 2 | top header 3 | top header 4 | top header 5 | top header 6 | top header 7 | top header 8 | top header 9 | top header 10 | top header 11 | top header 12 | top header 13 | top header 14 | top header 15 | top header 16 | top header 17 | top header 18 | top header 19 | top header 20 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
| ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
</syntaxhighlight>
produces the table below:
| top header 1 |
|---|
| left header 1 |
| left header 2 |
| ... |
| left header 30 |
| left header 31 (extra) |
| top header 2 | top header 3 | top header 4 | top header 5 | top header 6 | top header 7 | top header 8 | top header 9 | top header 10 | top header 11 | top header 12 | top header 13 | top header 14 | top header 15 | top header 16 | top header 17 | top header 18 | top header 19 | top header 20 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
| ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... | ... |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Implementation notes (how it works)
The way these templates work is by creating two tables:
- one table to house the row headers in the leftmost side, which a
styleattribute set tofloat: left, so that it will occupy only the necessary horizontal width to fit its contents, letting the browser place additional content to its right; and - a second table, wrapped in a
<div>(a block element, which will occupy all the available horizontal space) with two key properties in itsstyleattribute:overflow-x: auto, to make the content scroll in the horizontal direction if its width surpasses the available space left over by the first table; andwhite-space: nowrap, to prevent content in cells from wrapping over, and thus keep them aligned with the rows on the left (which assumes the row headers are also rendered on a single line).