Template:Sticky header

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

長いテーブルをスクロールして表の列見出しが画面外に出ても、画面上部に見出しが表示される (sticky) ようにします。ソート可能な表でのみ機能します。

基本

表の直前に {{sticky header}} テンプレートを追加し、表のclass属性にsticky-headerを追加します。

{{Sticky header}}
{| class="wikitable sortable sticky-header"
⫶
|}

シンプルな見出しの例

Caption

Name	A	B	C
Red	1	2	3
Lime	4	5	6
Gold	7	8	9
Blue	10	11	12
Pink	13	14	15
Cyan	16	17	18

{{Sticky header}}
{| class="wikitable sortable sticky-header"
|+ Caption
|-
! Name !! A !! B !! C
|-
! Red
| 1 || 2 || 3
|-
! Lime
| 4 || 5 || 6
⫶
|}

中間見出し

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

問題: 一番最初の中間見出しがstickyになる。

Caption

Name	A	B	C
Subsection 1
Red	1	2	3
Lime	4	5	6
Subsection 2
Gold	7	8	9
Blue	10	11	12

解: 最初の中間見出しの前に空行を挿入する。

Caption

Name	A	B	C
Subsection 1
Red	1	2	3
Lime	4	5	6
Subsection 2
Gold	7	8	9
Blue	10	11	12

{{Sticky header}}
{| class="wikitable sortable sticky-header"
|+ Caption
|-
! Name !! A !! B !! C
|-
| || || || 
|-
! colspan=4 |Subsection 1
|-
! Red
| 1 || 2 || 3
|-
! Lime
| 4 || 5 || 6
|-
! colspan=4 |Subsection 2
|-
...

既知の問題

Tested in browsers on Windows 10, Windows 11, iOS 17 (iphone SE 2020), and Android 13 (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 mode. Zooming out fully fixes the problem. This occurs in both the mobile and desktop versions of pages.
• On iPhones, 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 mode. This occurs in the desktop version of pages, whereas the mobile version works.
• On phones, especially in landscape mode, tables with several rows of column headers and/or column headers with natural or forced line breaks can take up the majority of the screen when sticky making it difficult to read the underlying data. There is no way to disable the sticky feature, so the only solutions are to change the orientation to portrait mode or don't use this template.

Tall column headers blocking too much data:

columns 1–4
columns 1–2		columns 3–4
c1	c2	c3	c4
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data

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