「Widget:ResponsiveTable」の版間の差分
(ページの作成:「<includeonly><style> .rptable-mobile{ width: 100%; } .rptable-mobile tbody, .rptable-mobile tr, .rptable-mobile tr > th, .rptable-mobile tr > td { width: auto; display: block; } .rptable-mobile { padding: 0em; } .rptable-mobile thead { display: block; background-color: #eaecf0; } .rptable-mobile tfoot { display: block; } .rptable-mobile tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; } .rptable-m…」) |
細編集の要約なし |
||
| 164行目: | 164行目: | ||
</script> | </script> | ||
</includeonly><noinclude> | </includeonly><noinclude> | ||
ウィンドウサイズが一定未満になるとセルが縦並びになるモバイルフレンドリ―なテーブル。ソートテーブルにも対応。幅が広すぎるテーブル向け。 | ウィンドウサイズが一定未満になるとセルが縦並びになるモバイルフレンドリ―なテーブル。ソートテーブルにも対応。幅が広すぎるテーブル向け。[[アイテム#アイテムの一覧]]などで使用中。 | ||
== 使い方 == | == 使い方 == | ||
2024年7月24日 (水) 08:05時点における最新版
ウィンドウサイズが一定未満になるとセルが縦並びになるモバイルフレンドリ―なテーブル。ソートテーブルにも対応。幅が広すぎるテーブル向け。アイテム#アイテムの一覧などで使用中。
使い方
通常のwikitableに、クラス「rptable」を追加する。
例：
{{#widget:ResponsiveTable}}
{| class="wikitable rptable"
|+ キャプション文
|-
! 見出しテキスト !! 見出しテキスト !! 見出しテキスト
|-
| セル内のテキスト || セル内のテキスト || セル内のテキスト
|-
| セル内のテキスト || セル内のテキスト || セル内のテキスト
|-
| セル内のテキスト || セル内のテキスト || セル内のテキスト
|}
注意事項
- セル連結をしているテーブルなどでは上手く機能しない。上手く機能するかどうか、編集を確定させる前にプレビューで見ておくべき。
- 幅が広くないテーブルでは使う価値は無い。