特定のテーブルにだけ任意の書式を適用するHTMLかCSS

Question

特定のテーブルにだけ任意の書式を適用するHTMLかCSS

以下のHTMLテーブルで、入れ子テーブル（区画１～区画４）には罫線なし、
外枠（田の字）だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか？

【解決案１】こうすると、入れ子テーブル（区画１～区画４）まで罫線が現れてしまいます。
table,td,th {border-collapse: collapse; border: 1px solid #000;}

【解決案２】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。
table {border-collapse: collapse; border: 1px solid #000;}
.tdstyle {border: 1px solid #000;}

【解決案３】外枠（田の字）だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね？
<table border="1" style="border-collapse: collapse" bordercolor="#111111">

外枠（田の字）だけに、IDをつけたり識別して、効率よく処理できませんか？

<html>
<head>
<style TYPE="text/css">

</style>
</head>
<body>
　　<table cellpadding=10>
　　　　<tr>
　　　　　　<td>
　　　　　　　　<table cellpadding=10><tr><td>区画１</td></tr></table>
　　　　　　</td>
　　　　　　<td>
　　　　　　　　<table cellpadding=10><tr><td>区画２</td></tr></table>
　　　　　　</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>
　　　　　　　　<table cellpadding=10><tr><td>区画３</td></tr></table>
　　　　　　</td>
　　　　　　<td>
　　　　　　　　<table cellpadding=10><tr><td>区画４</td></tr></table>
　　　　　　</td>
　　　　</tr>
　　</table>
</body>
</html>

区画１

区画２

区画３

区画４

think49 · Accepted Answer

効率だけ考えれば、こうなります。

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

think49 · Answer

#3です。子孫セレクタで子供セレクタを代替する一例を書いておきます。(全角空白は半角空白に置換してください) -------- 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

区画1

区画2

区画3

区画4

--------

naokita · Answer

思い出したけど、昔の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;}

区画１

区画２

区画３

区画４

tenderfeel · Answer

ソースそのままならこれで。

table, td, th {border-collapse: collapse; border: 1px solid #000;}
table table, table table td, table table th  {border:0;}

テーブルを入れ子にするより別のタグ（divとか）使う方が手っ取り早いですよ

特定のテーブルにだけ任意の書式を適用するHTMLかCSS

効率だけ考えれば、こうなります。

#3です。

思い出したけど、昔のMacIEの書き方を応用したらどう？ って知らないか・・・

ソースそのままならこれで。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

思い出したけど、昔のMacIEの書き方を応用したらどう？　って知らないか・・・