折りたたみ可能なCSSテーブルを作成する方法
一般に、誰かがアクセスしたときにWebページコンテンツの大部分がすぐに表示されるようにすることをお勧めしますが、例外もあります。たとえば、一部の履歴情報へのアクセスを提供したいが、ユーザーの気を散らす可能性のある数年分のページを乱雑にしたくない場合があります。
この種のことは、テーブルでよく起こります。スポーツテーブルやお気に入りのチャートがあり、比較の可能性を提供したいが、最初は最新のテーブルのコンテンツのみを表示する場合があります。このチュートリアルでは、JavaScriptの助けを借りて折りたたむCSSテーブルを作成するためのシンプルでエレガントな方法を提供します。
テーブルは従来、この種の操作に傾倒していませんでしたが、基本的には行要素の集まりであるため、行グループがミックスに追加されるとすべてが変化します。 3つの行グループ要素（thead、tbody、tfoot）は、テーブルに論理構造を提供し（また、頭と足をそのままにして本体をスクロールするなど、あらゆる種類のブラウザーの「トリック」を有効にする可能性があります）、コンポーネントをグループ化します。これにより、セクションをターゲットにして折りたたむことができます。
チュートリアルファイルのtable.htmlを見ると、そのようなCSSテーブルの例があります。これは、いくつかのオーディオトラック名と、関連するアーティストおよびアルバムを一覧表示する単純な3列のテーブルです。
基本的な構造コンポーネントに還元すると、CSSテーブルは次のコードブロックのようになります。
前のコードの順序が正しいことに注意してください：頭、足、体。これにより、ブラウザはすべてのテーブルのデータを受信する前にテーブルの足をレンダリングできます。ただし、ブラウザは、行グループを予想どおりの順序（頭、体、足）で正しく表示します。
技術的な懸念
フラットテーブルから折りたたみ可能なテーブルに移行するには、インタラクションがどのように機能するか、さまざまなタスクにどのテクノロジーが使用されるか、特定の場合に何が起こるかなど、多くのことを考慮する必要があります。テクノロジー、特にJavaScriptは利用できません。
最初：相互作用。テーブル本体の可視性を切り替える何らかの方法が必要です（これにより、テーブルが効果的に「開く」と「閉じる」ことになります）。テーブルフッターのリンクは、これを実現するための論理デバイスです。テクノロジーに関しては、JavaScriptとCSSの組み合わせがドロワーに一般的に使用され、JavaScriptは、ドロワーの「コンテンツ」を構成する要素の表示CSSプロパティ（およびそれによる可視性）を切り替えるために使用されます。したがって、JavaScriptを使用してtbody要素の表示値を変更します。最初はnoneであるため、テーブルは折りたたまれた状態で開始されます。
最後のポイントは、JavaScriptが有効になっていないユーザーのアクセシビリティの問題を引き起こします。スクリプトがないと、CSSテーブルはしっかりと閉じられたままになります。したがって、論理的には、tbody要素のデフォルト値は実際にそれを表示する必要があります。 none値は、JavaScriptが有効になっている場合にのみ適用する必要があります。これは、JavaScriptを使用してオーバーライドスタイルシートを添付することで実行できます。
簡単に「最後までスキップ」すると、この考えの結果とその後の回答がcollapsible-tables.htmlとその関連ファイルに表示されます。ドキュメントをウェブブラウザで開くと、前と同じテーブルキャプションとテーブルヘッドが表示されますが、テーブル本体は表示されません。フッターは、空ではなく、「テーブルコンテンツの切り替え」リンクと、下向きの魅力的な矢印を備えています。リンクをクリックすると（フッター全体が事実上アクティブな領域になります）、テーブル本体が表示されます。さらに、フッターリンクが次にクリックされたときにテーブル本体に何が起こるかを表示するために、下向きの矢印が上向きの矢印に変わります。
使用しているブラウザでJavaScriptを無効にしてページをリロードすると、いくつかの例外を除いて、テーブルが完全に表示されます。まず、横縞はJavaScriptによって駆動されるため、表示されません。次に、フッターリンクは、JavaScriptが無効になっているブラウザーには関係がないため、リンクが削除されます（ユーザーがクリックしても何も起こらないようにするため）。
フードの下
HTMLとCSSの大部分は非常に単純であり、前述のCSSテーブルチュートリアルとほとんど変わりません。マークアップでは、さまざまな依存関係にリンクするヘッドセクション以外の唯一の主要な重要な追加は、JavaScript関数をトリガーするためのリンクを含むテーブルフッターです。同じリンクを他の同様に構造化されたテーブルで使用して、同じ種類のトグルを駆動できます。
Toggle table content メインのCSSファイルであるcollapsible-tables.cssで注意すべき点は、tbody要素のデフォルトのスタイルとテーブルフッターのリンクです。これらはJavaScriptが無効になっている場合のデフォルトであることを忘れないでください。
tbody { display: table-row-group; } tfoot a { display: none; } 
ご覧のとおり、tbodyの表示値はtable-row-groupです。これは、1つ以上の行をグループ化する要素として表示することを指定します。前述のように、フッターリンクはまったく表示されないように設定されています。この時点で、簡単に説明する必要があります。
よくあることですが、Internet Explorerは、すばやくカーブボールを顔に直接投げます。 table-row-groupは理解できませんが、幸い、代わりにvalueブロックを使用すると、ページが正しくレンダリングされるようです。この値は他のすべてのブラウザで問題を引き起こすため、条件付きコメントを介してIE固有のオーバーライドとして適用されます。
メインプログラムに戻り、JavaScript対応ブラウザーのtbodyおよびテーブルフッターリンクスタイルが別のスタイルシートjs-override.cssに追加されました。これにより、tbodyのデフォルトの表示値がnoneに設定され、ページを最初に開いたときにテーブルが折りたたまれます。また、フッターリンクに一連のスタイルを追加し、ブロック要素として表示するように設定し（これにより、コンテナーであるテーブルフッターを埋めます）、下矢印画像を背景として定義します。 3番目のルールであるtfoota：hoverは、ホバー状態のリンクの背景色を変更し、クリック可能な要素であることをより明確にします。
tbody { display: none;}tfoot a { display: block; text-decoration: none; text-transform: uppercase; color: #000000; padding: 4px 0; background: url(down-arrow.gif) 5px 60% no-repeat;}tfoot a:hover { background-color: #eeeeee;} 
スクリプトの探索
トグル機能は、JavaScriptドキュメントcollapsible-tables.jsのコンテンツの一部によって駆動されます。ただし、スクリプトの最初のコードチャンクは、オーバーライドCSS（js-override.css）をアタッチするために使用されます。これは時間がかかるように見えるかもしれませんが、最新の方法を使用する場合は避ける必要があるdocument.writeとは異なり、準拠していることに注意してください。
var cssNode = document.createElement('link');cssNode.setAttribute('rel', 'stylesheet');cssNode.setAttribute('type', 'text/css');cssNode.setAttribute('href', 'js-override.css');document.getElementsByTagName('head')[0].appendChild(cssNode);Webページのテーブルフッターリンクをクリックすると、2つのことが発生する必要があります。矢印の画像が切り替わる必要があり、tbody要素の表示が切り替わる必要があります。各ターゲットは、トグル機能を介して定義されます。
矢印画像の場合、これは単純です。画像はテーブルフッターリンクの背景であるため、定義するパスはありません。したがって、スタイルの更新は、トグルで示されるクリックされた要素に適用されます。ただし、tbody要素をターゲットにするために、DOMツリーに沿ったパスはJavaScriptプロパティを使用して定義されます。
ターゲットパスの把握は主に論理的なプロセスであり、parentNodeプロパティを使用してドキュメント階層の1レベル上（たとえば、tdからtr）に移動し、nextSiblingを使用して親の次の子ノードにアクセスします。一部のブラウザは空白を次の兄弟としてカウントするため、スクリプトに別の行を追加して、ブラウザを次の兄弟に急いで送ります。
function toggle(toggler) { if(document.getElementById) { imageSwitch = toggler; targetElement = toggler.parentNode.parentNode.parentNode.nextSibling; if(targetElement.className == undefined) { targetElement = toggler.parentNode.parentNode.parentNode.nextSibling. nextSibling; }切り替えスクリプトの最後の部分は通常、要素がデフォルトの状態にあるかどうかを判断する単純なif / elseステートメントです。そうである場合は、代替状態に設定されます。そうでない場合は、デフォルトの状態に設定されます。 divドロワーのようなものでは、これらの値は通常noneでblockです。つまり、関数がトリガーされたときにdivの表示設定がnoneの場合はblockに設定され、それ以外の場合はnoneに設定されます。
この例の場合、Internet Explorerと他のすべてのブラウザーの要件が異なるため、追加の手順が必要になります。まず、変数を作成して、リストの展開に使用される代替CSS表示値を定義する必要があります。InternetExplorerの場合はブロック、その他の場合はtable-row-groupです。
if (navigator.userAgent.indexOf('IE')!= -1) { var displaySetting = 'block'; } else { var displaySetting = 'table-row-group'; }この値は、前述のif / elseステートメントで使用されます。このステートメントは効果的に次のようになります。ターゲットのtbody要素の表示値がblock（IEの場合）またはtable-row-group（その他すべての場合）の場合、noneに設定し、下矢印画像を表示します。それ以外の場合は、displayをblock（IEの場合）またはtable-row-group（その他すべての場合）に設定し、上矢印画像を表示します。
if (targetElement.style.display == displaySetting) { targetElement.style.display = 'none'; imageSwitch.style.backgroundImage = 'url(down-arrow.gif)'; } else { targetElement.style.display = displaySetting; imageSwitch.style.backgroundImage = 'url(up-arrow.gif)'; } } }
