- ベストアンサー
特定のテーブルにだけ任意の書式を適用するHTMLかCSS
- 特定のテーブルにだけ任意の書式を適用するHTMLかCSSについての解決案をまとめました。
- 解決案１では、入れ子テーブルまで罫線が現れてしまうことがあります。解決案２では、すべての該当する<td>タグにクラスを追加する必要があります。解決案３ではIEでのみ有効なbordercolorを使用したいと思っています。
- 解決案として、外枠（田の字）だけにIDをつけて効率的に処理する方法もあります。HTMLのテーブルには、入れ子テーブルを使用する場合や特定のテーブルにだけ書式を適用する場合は注意が必要です。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
効率だけ考えれば、こうなります。 table{ border-collapse: collapse; } table, tr, th, td { border-style: none; } body>table, body>table>tr, body>table>tr>th, body>table>tr>td { border: 1px solid #000; } ただし、未だ高いシェアを持つIE6を無視することになる…。(IE6は子供セレクタに対応していない) Browser market share http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2 で、これに対応するために考えられたのがIE7.jsとかIE9.jsとか。(当然、JavaScript必須) ie7-js - Project Hosting on Google Code http://code.google.com/p/ie7-js/ CSSだけで対応したければ、やはり子孫セレクタで子供セレクタを代替するしかないと思います。 IE でも擬似的に子供セレクタ - lucky bag http://www.lucky-bag.com/archives/2005/06/simulate_child.html
その他の回答 (3)
- think49
- ベストアンサー率59% (285/482)
#3です。 子孫セレクタで子供セレクタを代替する一例を書いておきます。(全角空白は半角空白に置換してください) -------- <style type="text/css"> <!-- table { border-collapse: collapse; } table, tr, th, td, table#Target table, table#Target tr tr, table#Target th th, table#Target td td { border-style: none; } table#Target, table#Target tr, table#Target th, table#Target td { border: 1px solid #000; } --> </style> </head> <body> <table> <tr> <td> <table><tr><td>区画1</td></tr></table> </td> <td> <table><tr><td>区画2</td></tr></table> </td> </tr> <tr> <td> <table><tr><td>区画3</td></tr></table> </td> <td> <table><tr><td>区画4</td></tr></table> </td> </tr> </table> </body> --------
- naokita
- ベストアンサー率57% (1008/1745)
思い出したけど、昔のMacIEの書き方を応用したらどう？ って知らないか・・・ table#soto,table#soto td,table#soto th{ border:none;} table#soto{ background: black;} table#soto td,table#soto th{ background: white;} th,td{ padding: 10px;} <table id="soto" border="1" cellspacing="1"> <tr> <td><table><tr><td>区画１</td></tr></table></td> <td><table><tr><td>区画２</td></tr></table></td> </tr> <tr> <td><table><tr><td>区画３</td></tr></table></td> <td><table><tr><td>区画４</td></tr></table></td> </tr> </table>
お礼
naokitaさん、ご回答ありがとうございました。 また、御礼遅くなってすみませんでした。 > 昔のMacIEの書き方を応用したらどう？ って知らないか・・・ はい、「昔のMacIEの書き方」ってのは知りませんが(^^;、 ご提示いただしたCSSがやろうとしていることは よく理解できました。 こういう方法もありますね、、、 大変参考になりました。ありがとうございました。
- tenderfeel
- ベストアンサー率56% (215/379)
ソースそのままならこれで。 table, td, th {border-collapse: collapse; border: 1px solid #000;} table table, table table td, table table th {border:0;} テーブルを入れ子にするより別のタグ（divとか）使う方が手っ取り早いですよ
補足
tenderfeelさん、早速ご回答ありがとうございます。 考え方はよく理解できましたが、本番環境は例示のようなシンプルなものでなく、 複雑なものなので、いちいち設定するのは大変だなあ、と思っていました。 大変参考になるご回答ありがとうざいました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
think49さん、、ご回答ありがとうございました。 また、御礼遅くなってすみませんでした。 さて本題ですが、＃４での解法の例示もさることながら、 > IE6を無視することになる…。(IE6は子供セレクタに対応していない) など、考え方や参考URL先がとても勉強になりました。 ありがとうございました