Uncyclopedia:CollapsibleTablesの使い方

出典: へっぽこ実験ウィキ『八百科事典(アンサイクロペディア)』
移動先: 案内検索

このページではコラプシブル・テーブル(Collapsible Tables)つまり折りたたみ表示段組について説明しています。

コラプシブル・テーブルは、折り畳みできる段組(テーブル)をJavaScriptとスタイルシートで動作しています。

使用方法[編集]

tableタグを使うことで導入できます。tableタグのクラスにcollapsibleを入れるだけです。

<table class="collapsible" style="width:80%">
<caption>[... 見出し(表示ボタンがつく) ...]</caption>
<tr><td>[... 折り畳み機能を使いたいセル -101 ...]</td><td>[... 折り畳み機能を使いたいセル -102 ...]</td></tr>
<tr><td>[... 折り畳み機能を使いたいセル -201 ...]</td><td>[... 折り畳み機能を使いたいセル -202 ...]</td></tr>
</table>
[...見出し(表示ボタンがつく)...]
[... 折り畳み機能を使いたいセル -101 ...][... 折り畳み機能を使いたいセル -102 ...]
[... 折り畳み機能を使いたいセル -201 ...][... 折り畳み機能を使いたいセル -202 ...]

なお、スタイルシートでwidthを指定しないと残念なことになります。

<table class="collapsible">
<caption>[...見出し(表示ボタンがつく)...]</caption>
<tr><td>[... 折り畳み機能を使いたいセル -101 ...]</td><td>[... 折り畳み機能を使いたいセル -102 ...]</td></tr>
<tr><td>[... 折り畳み機能を使いたいセル -201 ...]</td><td>[... 折り畳み機能を使いたいセル -202 ...]</td></tr>
</table>
[...見出し(表示ボタンがつく)...]
[... 折り畳み機能を使いたいセル -101 ...][... 折り畳み機能を使いたいセル -102 ...]
[... 折り畳み機能を使いたいセル -201 ...][... 折り畳み機能を使いたいセル -202 ...]

またクラスでcollapsedを指定すると最初から折り畳んだ状態になります。

<table class="collapsible collapsed" style="width:80%">
<caption>[... 見出し(表示ボタンがつく) ...]</caption>
<tr><td>[... 折り畳み機能を使いたいセル -101 ...]</td><td>[... 折り畳み機能を使いたいセル -102 ...]</td></tr>
<tr><td>[... 折り畳み機能を使いたいセル -201 ...]</td><td>[... 折り畳み機能を使いたいセル -202 ...]</td></tr>
</table>

その他の機能[編集]

  • ページ内に有効なコラプシブル・テーブルが複数ある場合に、クラスにautocollapseが指定されているコラプシブル・テーブルは最初から折り畳まれた状態になります。
  • クラスにoutercollapseを指定した要素の子孫要素で、クラスにinnercollapseが指定されているコラプシブル・テーブルは最初から折り畳まれた状態になります。

ちなみにwikiテーブルでも構わない。

{| class="collapsible" style="width:80%"
|+[...見出し(表示ボタンがつく)...]
|-
|[... 折り畳み機能を使いたいセル -101 ...]||[... 折り畳み機能を使いたいセル -102 ...]
|-
|[... 折り畳み機能を使いたいセル -201 ...]||[... 折り畳み機能を使いたいセル -202 ...]
|}
[...見出し(表示ボタンがつく)...]
[... 折り畳み機能を使いたいセル -101 ...] [... 折り畳み機能を使いたいセル -102 ...]
[... 折り畳み機能を使いたいセル -201 ...] [... 折り畳み機能を使いたいセル -202 ...]

ブラウザの対応[編集]

JavaScriptとCSSを実装したブラウザでは、折り畳み機能を使うことができます。

JavaScriptが未実装あるいは無効化されている環境では、すべて展開された状態で表示されるのであまり深く考えないでよい。が、ご利用は計画的に

類似品[編集]