特定のテーブルにだけ任意の書式を適用するHTMLかCSS
以下のHTMLテーブルで、入れ子テーブル(区画1~区画4)には罫線なし、
外枠(田の字)だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか?
【解決案1】こうすると、入れ子テーブル(区画1~区画4)まで罫線が現れてしまいます。
table,td,th {border-collapse: collapse; border: 1px solid #000;}
【解決案2】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。
table {border-collapse: collapse; border: 1px solid #000;}
.tdstyle {border: 1px solid #000;}
【解決案3】外枠(田の字)だけ、以下のようにしたいですが、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>区画1</td></tr></table>
</td>
<td>
<table cellpadding=10><tr><td>区画2</td></tr></table>
</td>
</tr>
<tr>
<td>
<table cellpadding=10><tr><td>区画3</td></tr></table>
</td>
<td>
<table cellpadding=10><tr><td>区画4</td></tr></table>
</td>
</tr>
</table>
</body>
</html>
No.3ベストアンサー
- 回答日時:
効率だけ考えれば、こうなります。
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-s …
で、これに対応するために考えられたのが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/simula …
think49さん、、ご回答ありがとうございました。
また、御礼遅くなってすみませんでした。
さて本題ですが、#4での解法の例示もさることながら、
> IE6を無視することになる…。(IE6は子供セレクタに対応していない)
など、考え方や参考URL先がとても勉強になりました。
ありがとうございました
No.4
- 回答日時:
#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>
--------
No.2
- 回答日時:
思い出したけど、昔の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>区画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>
naokitaさん、ご回答ありがとうございました。
また、御礼遅くなってすみませんでした。
> 昔のMacIEの書き方を応用したらどう? って知らないか・・・
はい、「昔のMacIEの書き方」ってのは知りませんが(^^;、
ご提示いただしたCSSがやろうとしていることは
よく理解できました。
こういう方法もありますね、、、
大変参考になりました。ありがとうございました。
No.1
- 回答日時:
ソースそのままならこれで。
table, td, th {border-collapse: collapse; border: 1px solid #000;}
table table, table table td, table table th {border:0;}
テーブルを入れ子にするより別のタグ(divとか)使う方が手っ取り早いですよ
この回答への補足
tenderfeelさん、早速ご回答ありがとうございます。
考え方はよく理解できましたが、本番環境は例示のようなシンプルなものでなく、
複雑なものなので、いちいち設定するのは大変だなあ、と思っていました。
大変参考になるご回答ありがとうざいました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
ホームページ 表の上の余白を...
-
テーブルの線の内側の色も指定...
-
セルをまたがるリンク。
-
文字列が入っているtdを削除せ...
-
値が0なら非表示にしたい
-
テーブルタグのセルの幅の一部...
-
テーブルのヘッダとボディの幅...
-
テーブルの行の高さを指定する...
-
テーブルのセルにアンカー
-
テーブルタグの中に<ol><li>を...
-
safariで特定条件下でデーブル...
-
テーブル結合 縦横両方するには?
-
tableにul,または,olを入れられ...
-
テーブルを2つ横に並べる
-
TABLE内の枠線を一部消すには
-
テーブルの入れ子について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行を折りたたみたい...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
逆L字の表(table)組み
-
ホームページ 表の上の余白を...
-
表の中の列の順番を入れ替える...
-
EXCELからhtmlへの変換で罫線が...
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
文字の中央そろえを一括で指定...
おすすめ情報