- ベストアンサー
テーブル表示の切り替えに関する問題
- JavaScriptを使ってテーブルの行ごとに表示/非表示を切り替える方法について、表示が異なる問題が発生しています。
- IEでは正常に表示されるが、FirefoxやSafariでは一部の要素が表示されない現象が発生しています。
- CSSの書き方に関係している可能性がありますが、詳細な解決策を教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
displayの値がblockだと、単純なボックスになるけど display:table-row; で、HTMLで言うところのtrになる。この場合table-cellかも。 displayで指定するのは、見せる見せないではなく、それをどのような要素にするかということ。 9.2.5 'display'プロパティ（The 'display' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#display-prop ) いちいちIDで指定していたら、同じ指定をたくさん書かなくてはならない。(CSSのCSSたる)カスケーディングをうまく使う。=継承されるプロパティ、詳細度、要素セレクタ、子孫セレクタ、隣接セレクタ、クラスセレクタ、擬似クラスセレクタ、擬似要素・・・ 下は、thにホーバーすると、tdを見せる方法。table全体とか、様々に使える。visibilityをつかっても良いかな・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- table[summary=focus]{border-collapse:collapse;} table[summary=focus],table[summary=focus] th,table[summary=focus] td{border:solid 1px gray;} table[summary=focus] tr.test td{display:none;} table[summary=focus] tr.test th:hover+td, table[summary=focus] tr.test th:hover+td+td{display:table-cell;} --> </style> </head> <body> <h1>サンプル</h1> <table summary="focus" > <tbody> <tr> <th abbr="見出し">見出し</th><th abbr="見出し２">見出し</th><th abbr="見出し3">見出し</th> </tr> <tr> <th abbr="a">値</th><td>123</td><td>456</td> </tr> <tr class="test"> <th abbr="a">値</th><td>123</td><td>456</td> </tr> <tr> <th abbr="a">値</th><td>123</td><td>456</td> </tr> </tbody> </table> </body> </html>
お礼
御指摘の方法でうまくいくようになりました。 添付コードも参考にさせていただきます。 ありがとうございました。