Template:Scrolling table/top

Template documentation[view] [edit] [history] [purge]

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.

Usage example

The following code:

{{Scrolling table/top |first = top header 1
 |left header 1
 |left header 2
 |...
 |left header 30
}}
|-
!left header 31 (extra)
{{Scrolling table/mid}}
|-
! 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
{{Scrolling table/end}}

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

The above documentation is transcluded from Template:Scrolling table doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Subpages of this template.