Template:Sticky header/doc

長いテーブルをスクロールして表の列見出しが画面外に出ても、画面上部にヘッダーが固定される (sticky) ようにします。

基本

対象の表より前に {{sticky header}} テンプレートを追加し、表に以下のいずれかのCSSクラスを追加します。

クラス	概要
sticky-header	表冒頭のヘッダーを固定します。
sticky-header-multi	ソート可能な表である必要があります。 複数行で構成されるヘッダーを固定します。 sorttopクラスとの併用は避けてください。 中間見出しのある表を避けてください。 ランドスケープ表示のモバイルデバイス等で閲覧性を損なう恐れがあるため非常に高さのあるヘッダーを持つ表に使用することを避けてください。

シンプルな一行ヘッダー

sticky-headerクラスは、最初の一行ヘッダーを固定します。sortableは必須ではありません。

Caption

Color	A	B	C
Max	10	11	12
Red	1	2	3
Lime	4	5	6
Gold	7	8	9
Blue	10	11	12
Total	22	26	30

{{sticky header}}
{| class="wikitable sortable sticky-header"
|+ Caption
|-
! Color !! A !! B
! class="unsortable" | C
|- class=sorttop
| '''Max''' || 10 || 11 || 12
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class=sortbottom
| '''Total''' || 22 || 26 || 30
|}

複数行で構成されるヘッダー

sticky-header-multiクラスは、複数行で構成されるヘッダーを固定します。

sortableも必要です。これは複数行で構成されるヘッダーを<thead>要素下に置く現状唯一の方法だからです。

ソート時に特定行を表の一番上に置くsorttopクラスの併用は避けてください。ソートを行なった時、その行が<thead>要素下に置かれることで固定 (sticky) されてしまいます。 回避策の一つはsortbottomクラスを使用して表の上ではなく、下に置かれるようにすることです。

Caption

Color	Data
	A	B	C
Red	1	2	3
Lime	4	5	6
Gold	7	8	9
Blue	10	11	12
Max	10	11	12
Total	22	26	30

{{sticky header}}
{| class="wikitable sortable sticky-header-multi"
|+ Caption
|-
! rowspan=2 | Color
! colspan=3 | Data
|-
! A !! B
! class="unsortable" | C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class=sortbottom
| '''Max''' || 10 || 11 || 12
|- class=sortbottom
| '''Total''' || 22 || 26 || 30
|}

中間見出し

中間見出しはアクセシビリティの観点から推奨されません (Wikipedia:スタイルマニュアル/表#中間見出しを避ける, Tables with Multi-Level Headers)。表の構成の変更を検討してください。

連続した行のヘッダーが固定されるため、ヘッダーの直後に中間見出しを配置するとその中間見出しも固定されます。

ヘッダー行と最初の中間見出しの間に空のデータセルを追加して、後者が連続したヘッダー行に含まれないようにすることで一応回避できます。

Caption

Color	Data
	A	B	C
Section 1
Red	1	2	3
Lime	4	5	6
Section 2
Gold	7	8	9
Blue	10	11	12

{{sticky header}}
{| class="wikitable sortable sticky-header-multi"
|+ Caption
|-
! rowspan=2 | Color
! colspan=3 | Data
|-
! A !! B !! C
|-
| colspan=4 |
|-
! colspan=4 | Section 1
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
! colspan=4 | Section 2
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|}

非常に高さのあるヘッダー

特に小さなモバイル画面で横向き表示の場合に、画面の大部分 (あるいは全て) を占めるような過度に背の高いヘッダー行は避けてください。解決策としては、ヘッダーテキストの一部をテーブルのキャプションに移動する、ヘッダーテキストをより簡潔にする、ヘッダー内の改行を削除する、表を分割してヘッダーを減らす、などが考えられます。

Header group 1
Header group 2		Header group 3
Header 1	Header 2	Header 3	Header 4
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data

既知の問題

Tested in browsers on Windows 10, Windows 11, iOS 17 (iphone SE 2020 and iPhone 14 Pro Max), and Android 14 (Samsung Galaxy S21).

• On Android phones, table headers aren't top-sticky if at least one table using this template is wider than the screen, which is more likely in portrait orientation. The table's horizontal scroll doesn't work with this template, so wide tables span outside of the main content area making the entire page wider and requiring you to instead horizontally scroll the entire page. Zooming out to see the entire table makes the headers sticky, but also makes the text smaller and less readable the wider the table is. Currently, the only semi-solution is to view the zoomed out sticky headers in landscape orientation instead of portrait orientation so that the text is more readable.
• <div style="overflow:auto"></div> - Do not use this around tables. It prevents sticky headers until removed. See diff. See "List by region" table.

類似テンプレート

• {{Sticky table start}}