Bản mẫu:Scrolling table doc

Bản mẫu:Documentation subpage This set of templates (Bản mẫu:Tl, Bản mẫu:Tl, Bản mẫu:Tl) allows the production of tables that scroll horizontally when they're wider than the screen. This is especially useful in comparison tables. Note that only the three subtemplates mentioned above are used to make the tables — this template page serves solely as documentation.

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 Bản mẫu:Tlx subtemplate, for convenience.
  • Extra row headers can be added using regular table syntax, between the Bản mẫu:Tlx and the Bản mẫu:Tlx subtemplates
  • Important: The Bản mẫu:Tl subtemplate uses zero-width spaces to ensure newlines are added where appropriate. Be careful when editing them.

Usage example

The following code:

<syntaxhighlight lang="wikitext">

top header 1 {{#if: left header 1
left header 1 }}{{#if: left header 2	​
left header 2 }}{{#if: ...	​
... }}{{#if: left header 30	​
left header 30 }}{{#if: |​
side header 5 }}{{#if: |​
side header 6 }}{{#if: |​
side header 7 }}{{#if: |​
side header 8 }}{{#if: |​
side header 9 }}{{#if: |​
side header 10 }}{{#if: |​
side header 11 }}{{#if: |​
side header 12 }}{{#if: |​
side header 13 }}{{#if: |​
side header 14 }}{{#if: |​
side header 15 }}{{#if: |​
side header 16 }}{{#if: |​
side header 17 }}{{#if: |​
side header 18 }}{{#if: |​
side header 19 }}{{#if: |​
side header 20 }}{{#if: |​
side header 21 }}{{#if: |​
side header 22 }}{{#if: |​
side header 23 }}{{#if: |​
side header 24 }}{{#if: |​
side header 25 }}{{#if: |​
side header 26 }}{{#if: |​
side header 27 }}{{#if: |​
side header 28 }}{{#if: |​
side header 29 }}{{#if: |​
side 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 {{#if: left header 1
left header 1 }}{{#if: left header 2	​
left header 2 }}{{#if: ...	​
... }}{{#if: left header 30	​
left header 30 }}{{#if: |​
side header 5 }}{{#if: |​
side header 6 }}{{#if: |​
side header 7 }}{{#if: |​
side header 8 }}{{#if: |​
side header 9 }}{{#if: |​
side header 10 }}{{#if: |​
side header 11 }}{{#if: |​
side header 12 }}{{#if: |​
side header 13 }}{{#if: |​
side header 14 }}{{#if: |​
side header 15 }}{{#if: |​
side header 16 }}{{#if: |​
side header 17 }}{{#if: |​
side header 18 }}{{#if: |​
side header 19 }}{{#if: |​
side header 20 }}{{#if: |​
side header 21 }}{{#if: |​
side header 22 }}{{#if: |​
side header 23 }}{{#if: |​
side header 24 }}{{#if: |​
side header 25 }}{{#if: |​
side header 26 }}{{#if: |​
side header 27 }}{{#if: |​
side header 28 }}{{#if: |​
side header 29 }}{{#if: |​
side 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 style attribute set to float: 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 its style attribute:
  • 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; and
  • white-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).