Template:Sticky table start/doc

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

Template:Sticky table start/doc

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


用法

対象の表の前後に{{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に固定されるセルが発生します。


行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

類似テンプレート


Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.