Movatterモバイル変換

[0]ホーム
URL:

Jump to content
WikipediaThe Free Encyclopedia
Search

Template:Scrolling table doc

From Wikipedia, the free encyclopedia

These templates are deprecated. See better methods:

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. 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{{Scrolling table/top}} subtemplate, for convenience.

Usage example

[edit]

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 2top header 3top header 4top header 5top header 6top header 7top header 8top header 9top header 10top header 11top header 12top header 13top header 14top header 15top header 16top header 17top header 18top header 19top header 20
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
.........................................................
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum

Implementation notes (how it works)

[edit]

The way these templates work is by creating two tables:

  • one table to house the row headers in the leftmost side, which astyle attribute 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 itsstyle 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).
Retrieved from "https://en.wikipedia.org/w/index.php?title=Template:Scrolling_table_doc&oldid=1284559405"
Category:
[8]ページ先頭
©2009-2026 Movatter.jp