<table>のclass指定が継承されない

質問

<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。

HTMLを

<table class="sample">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>

とし、
cssを

table, td {
border: 2px #2b2b2b solid;
}

とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。

ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。
試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。
全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。

考えられる原因としてはどのようなものがありますでしょうか…？

回答No.3

ORUKA1951 · ベストアンサー

＞borderが継承されないと言う点は理解しているのですが、<table>に対して指定したclassがその下に位置する<td>に継承されないという点で困っております。
　それは「継承」ではありません。
★それは、tdに指定したスタイルが適用されないという事です。
　　カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )

table.sample td{}
は、
・class属性の空白で仕切られた値リストの一つにsampleを持つtable要素の子孫であるtd要素という意味です。詳細度は[0 0 1 2]＝12です。
　これが適用されないと言う事は、
・より高い詳細度の指定がある。
　　一意セレクタ[0100]とか、スタイル属性[1000]
　　より詳細な記述がある。body div.section table td [0 0 1 4]、
・同じ詳細度で後述の指定がある。
・HTMLの文書構造かセレクタの記述に誤りがある。
　の何れかでしょう。

　Web開発されているなら、開発者ツールが豊富なfirefoxお使いだと思いますがそのアドオンにFirebug( https://addons.mozilla.jp/firefox/details/1843 )があります。それでスタイルが適用されない要素を選択すると、カスケードの順番に従ってスタイルが明示されます。
　それを使うのが、最もよくわかる。

お礼

回答ありがとうございます。

まだ原因は究明できてないのですが、tableとtrを同時に指定する事で解決しましたので、とりあえず問題自体は解決したという事で、閉め切らせて頂きます。
今後、しっかり原因を究明していきたいと思います。

ありがとうございました。

回答No.2

ORUKA1951

borderは継承されないプロパティです。継承されたらまずいです。
[例]
<div class="sample">
　<h1>見出し</h1>
　<p>記事</p>
で、div.sample{border:solid 1px red;}と書いて継承されたら<h1>にも<p>にもborderが引かれてしまう。
'border-style'
値: <border-style>{1,4} | inherit
初期値: 個々のプロパティを参照
適用対象: すべての要素
継承: no　★継承されない
パーセンテージ: 利用不可
メディア: visual
算出値: 個々のプロパティを参照
　⇒Box model - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#propdef-border-style )

table.sample{
border: solid 2px gray;
}
table.sample th,table.sample td{
border:1px gray solid;
}
と、borderは個別に指定します。
逆に言うと、上下左右のborderを変更した利することも簡単にできます。
cellpadding - HTML - 教えて！goo( http://okwave.jp/qa/q8788064.html )
の回答が参考になるでしょう。

★なお、tableの場合はsummary属性が必須ですのでそれを使うと
table[summary="コーヒーの種類"]{*************}
のように、属性セレクタで書くほうが楽です。
また、本文中の表をすべてしたら
div.section table{}
div.section table th,div.section td{}
とするなど

5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
　をしっかり活用しましょう。CSSの命ともいえる重要な部分ですから・・

お礼

ご回答ありがとうございました。
質問内容に誤りがあったために、補足させて頂きました。
ご迷惑をおかけし申し訳ありません。

補足

質問の記述内容に誤りがありました。ご迷惑をおかけしすみません。

CSSは、No1様が記述されているように、classを限定した表記の
table.sample td {
border: 2px #2b2b2b solid;
}
で記述した場合の話です。

borderが継承されないと言う点は理解しているのですが、<table>に対して指定したclassがその下に位置する<td>に継承されないという点で困っております。
新しく作り直したhtmlとcssでは問題なく継承されますので、何か原因があるのだろうとは思っているのですが…

回答No.1

t_ohta

今運営されているホームページには、質問者さんがcssの記述をしか箇所以外にtdのスタイルを指定している箇所があるのではないでしょうか。

また、tableにclassをつけているのであれば
table.sample td {
border: 2px #2b2b2b solid;
}
とすれば、sampleクラスのテーブル内のtdにスタイルが適用されます。

お礼

ご回答ありがとうございました。
質問内容に誤りがあったために、補足させて頂きました。
ご迷惑をおかけし申し訳ありません。

補足

質問の記述内容に誤りがありました。ご迷惑をおかけしすみません。

CSSは、No1様が記述されているように、classを限定した表記の
table.sample td {
border: 2px #2b2b2b solid;
}
で記述した場合の話です。

同じようにID指定で記述しているtdが一つあるのですが、そちらを削除してもclass指定が継承されませんでした。。