スタイルシートについてまだ初心者なため質問させてください。
以下のようにテーブルのボーダーのスタイルを子要素(<table><td>)にスタイルを継承(?)させているのですが、この方法だと子要素の子要素(<table><td><table><td>)に対しても継承されてしまいます。
table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }
table.border > td {…} という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。
子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。
table.none{border-style:none;}
table.none td{border-style:none;}
HTMLタグに直接以下のように指定しても同様でした。
<table style="border-style:solid;">
どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。
もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば(不必要なタグには指定しなければ)可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。
どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか?
No.2ベストアンサー
- 回答日時:
微妙に把握してませんがこう?
table.border table.none td {
border:0px none;
}
「css 優先順位」などで検索するといろいろヒットしますよ
以下のコードで上手く行きました!
ありがとうございます!
クラスにクラスを重ねて指定できるんですね。
勉強になりました。
>「css 優先順位」などで検索するといろいろヒットしますよ
ありがとうございます。
いろいろ調べてみます。
<style>
table.border table.none td { border:0px none; }
table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }
</style>
<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>
No.3
- 回答日時:
table.none td {
border:none;
}
を
table.border td{
border:1px solid;
}
より「後に(下に)」書けばいいのでは。
ありがとうございます!
以下のコードで動作しました!
このコードでは「table.none td」を「table.border」の前にもってくるだけで動作しなくなってしまいます。
先に書くか後に書くかで動作が変わるとは思いませんでした…。
勉強になります。
<style>
table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }
table.none td { border:0px none; }
</style>
<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>
No.1
- 回答日時:
たとえばこんな風で?
<style>
table.border td table td{
border:0px solid;
}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>
<table class="border">
<tr>
<td>
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>
この回答への補足
説明がわかりづらく申し訳ありません。
ソースまでご用意いただきありがとうございます。
はじめからHTMLソースを示せばよかったです。
以下のコードで<table class="none">がうまくいかないので困っています。これを成功させるのはどのように指定すればよいのでしょうか。
<style>
table.none td {
border:0px none;
}
//table.border td table td{
//border:0px none;
//}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>
<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>
教えていただいた「table.border td table td」で目的は果たせるのですが、「table.border td table td」の時もあれば、「table.border td table td table td」の時もあるので目的の子要素の階層を動的に指定したいと考えています。
また、同じ階層の子要素でもそのまま継承したいものとそうではないものがあります。
そもそも親要素が優先されるというのがスタイルシートの構造として疑問なのですが、そういうものなのでしょうか…。
問題は無事解決する事ができました。
ソースまでご用意いただきありがとうございました。
また、最初に回答を書き込んでいただきありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
テーブルとテーブルの間隔について
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
正規表現で「より前」と「より後」
-
テーブル内のセル間にスペース...
-
テーブル幅が固定できない
-
HTML tableのセルにtextareaを...
-
<fieldset>タグについて
-
同じ幅指定のつもりなのに、ブ...
-
tableを画面中央に配置する方法
-
tableタグとtableタグの間の余...
-
HTML5で、テーブル内tdタグの高...
-
終了タグは省略可?
-
テーブルからはみ出します
-
VBAで作れるかな?
-
HTMLのテーブルをExcelにCopy&P...
-
フレームの境界線にぴったりつ...
-
テーブルタグの中にdivを含めて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
(HTML)Tableを任意の位置に置...
-
同じ幅指定のつもりなのに、ブ...
-
<fieldset>タグについて
-
tableを縦に続けるとtable間の...
-
画面幅に合わせてテーブルのカ...
-
html5のテーブル内でdivのタブ...
-
テーブル内のセル間にスペース...
-
ホームページのテキストを折り...
-
TR タグの表示・非表示を一括で...
-
tableの位置がIEとその他ブラウ...
-
textareaの外側の文字が下付き...
-
テーブルの高さを100%にしたけ...
-
ラインを端から端まで画面いっ...
おすすめ情報