Template:Sticky header
このテンプレートはテンプレートスタイルを使用しています: |
長いテーブルをスクロールして表の列見出しが画面外に出ても、画面上部にヘッダーが固定される (sticky) ようにします。
基本
[編集]対象の表より前に {{sticky header}}
テンプレートを追加し、表に以下のいずれかのCSSクラスを追加します。
クラス | 概要 |
---|---|
sticky-header
|
表冒頭のヘッダーを固定します。 |
sticky-header-multi
|
ソート可能な表である必要があります。 複数行で構成されるヘッダーを固定します。 sorttop クラスとの併用は避けてください。 中間見出しのある表を避けてください。 ランドスケープ表示のモバイルデバイス等で閲覧性を損なう恐れがあるため非常に高さのあるヘッダーを持つ表に使用することを避けてください。
|
シンプルな一行ヘッダー
[編集]sticky-header
クラスは、最初の一行ヘッダーを固定します。sortable
は必須ではありません。
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
クラスを使用して表の上ではなく、下に置かれるようにすることです。
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)。表の構成の変更を検討してください。
連続した行のヘッダーが固定されるため、ヘッダーの直後に中間見出しを配置するとその中間見出しも固定されます。
ヘッダー行と最初の中間見出しの間に空のデータセルを追加して、後者が連続したヘッダー行に含まれないようにすることで一応回避できます。
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.