Template:Sticky table end

テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

このテンプレートは表の周囲にスクローラブルなコンテナを追加し、特定の行や列をスクロールアウトしないように固定できます。

画面の小さなモバイルデバイスなどで、固定された行・列が邪魔になる場合があるため、固定を解除するトグルボタンが表示されます。

用法

対象の表の前後に{{sticky table start}}と{{sticky table end}}を挿入します。必要に応じて以下のクラスを使用します。

テーブル用クラス

クラス	概要
sticky-table-head	列ヘッダーを固定します。sticky-table-rowNと併用しないでください。ソート可能な表である必要があります。sorttopクラスとの併用は避けてください。ランドスケープ表示のモバイルデバイス等で閲覧性を損なう恐れがあるため非常に高さのあるヘッダーを持つ表に使用することを避けてください。
sticky-table-rowN	N (1または2) 行目のヘッダーを固定します。sticky-table-headと併用しないでください。行を結合している (code>rowspan) 場合、結果を予期できなくなります。
sticky-table-colN	N (1または2) 列目のヘッダーを固定します。 列を結合している (code>colspan) 場合、結果を予期できなくなります。ポートレート表示のモバイルデバイス等で閲覧性を損なう恐れがあるため幅をとるヘッダーに使用することを避けてください。

セル用クラス

クラス	概要
sticky-table-none	rowspanにより問題が起きる場合に固定を解除します。例えば、rowspanを使う、固定した列では、その次の列に固定されたセルが出現します。その次の列のヘッダーの1つがソート可能であれば、そのセルにクラスを追加しなければなりません。
sticky-table-left	rowspanにより問題が起きる場合に対象セルを左端固定に指定します。例えば、列1でrowspanを使用し、列2を固定する場合、列2には固定されないセルがあり、列3に固定されるセルが発生します。

テンプレートの引数

引数	概要
style	表を囲むdiv要素に追加のスタイルを指定します。

行1と列1を固定した表

{{Sticky table start}}
{| class="wikitable sticky-table-row1 sticky-table-col1"
⫶
|}
{{Sticky table end}}

Caption

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10	Header 11	Header 12	Header 13	Header 14	Header 15	Header 16	Header 17	Header 18	Header 19	Header 20
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data

列ヘッダーと列1を固定した表

{{Sticky table start}}
{| class="wikitable sortable sticky-table-head sticky-table-col1"
|+ Caption
|-
! rowspan="2" | Header 1
! colspan="4" | Header group 1
⫶
|-
! class="sticky-table-none" | Header 2
! Header 3 !! Header 4 !! Header 5 !! …
⫶
|}
{{Sticky table end}}

Header 2セルはrowspanを使用するHeader 1により起こる固定の問題を修正するためsticky-table-noneクラスを使用する。

Caption

Header 1	Header group 1				Header group 2					Header group 3					Header group 4
	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10	Header 11	Header 12	Header 13	Header 14	Header 15	Header 16	Header 17	Header 18	Header 19	Header 20
top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom

類似テンプレート

• {{sticky header}}

この解説は、Template:Sticky table start/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (作成 | 複製)とテストケース (作成)で試すことができます。（解説）
このテンプレートのサブページ一覧。