プロが教えるわが家の防犯対策術!

<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を指定することで全セルに反映させたいと思っています。

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

>borderが継承されないと言う点は理解しているのですが、<table>に対して指定したclassがその下に位置する<td>に継承されないという点で困っております。


 それは「継承」ではありません。
★それは、tdに指定したスタイルが適用されないという事です。
  カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

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 )があります。それでスタイルが適用されない要素を選択すると、カスケードの順番に従ってスタイルが明示されます。
 それを使うのが、最もよくわかる。
    • good
    • 1
この回答へのお礼

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

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

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

お礼日時:2014/10/14 21:34

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/CSS … )


table.sample{
border: solid 2px gray;
}
table.sample th,table.sample td{
border:1px gray solid;
}
と、borderは個別に指定します。
逆に言うと、上下左右のborderを変更した利することも簡単にできます。
cellpadding - HTML - 教えて!goo( http://oshiete.goo.ne.jp/qa/8788064.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/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 をしっかり活用しましょう。CSSの命ともいえる重要な部分ですから・・

この回答への補足

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

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

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

補足日時:2014/10/14 18:10
    • good
    • 0
この回答へのお礼

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

お礼日時:2014/10/14 18:10

今運営されているホームページには、質問者さんが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指定が継承されませんでした。。

補足日時:2014/10/14 18:19
    • good
    • 0
この回答へのお礼

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

お礼日時:2014/10/14 18:20

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSで特定のテーブルだけに適用する記述をおしえてください。

個人でHPをつくっているものなのですが、

外部CSSファイルに

table, td, th {
border: 2px red solid;
}
という記述をすると
すべてのページにあるテーブルに適用されてしまいました。

ある箇所のテーブルなど指定するテーブルのみに記述したい場合はどういったタグにしたらよいのでしょうか?

お詳しい方どうぞよろしくお願いいたします。

Aベストアンサー

特定の箇所のテーブルタグにclass属性を付けてそれを指定します。
<tr> <td>にもつける必要があるでしょう。(何かいい方法があれば別ですが、)

<table class="ta1">
<tr class="ta1">
<td class="ta1">
とし、

table.ta1, td.ta1, th.ta1 {
border: 2px red solid;
}
と指定してみてください。

QTRとTDに対するCSS設定方法を教えてください

http://k52.org/syokuzai/c/fish/
↑のようなカレンダーを作りたいと考えております。

ソースよりTABLE内のTRとTDに外部CSSファイルで設定していると
思っているのですが、どのようにすればTDの背景色(紺色)より
大きい幅のTR(要は列)のライン(薄い青色)を付けられるのか
が分かりません。

わかりにくい説明とは思うのですが、どうぞよろしくお願いします。

Aベストアンサー

構造も簡単だしざっとみれば、ある程度想像つくと思いますが・・・

適合するCSSをぬきだすとこんな感じ

<style>
table.cal, tr, td {
padding:4px;
}
tr.fish {
background-color:#F3F6FF;
}
td.mon span {
background-color:#557766;
color:#FFFFFF;
display:block;
}
</style>

<table class="cal">
<tbody>
<tr class="fish">
<td class="mon"><span>1</span></td>
<td class="mon">2</td>
<td class="mon">3</td>
</tr>
<tr>
<td class="mon">4</td>
<td class="mon"><span>5</span></td>
<td class="mon">6</td>
</tr>
<tr class="fish">
<td class="mon">7</td>
<td class="mon">8</td>
<td class="mon"><span>9</span></td>
</tr>
</tbody>
</table>

構造も簡単だしざっとみれば、ある程度想像つくと思いますが・・・

適合するCSSをぬきだすとこんな感じ

<style>
table.cal, tr, td {
padding:4px;
}
tr.fish {
background-color:#F3F6FF;
}
td.mon span {
background-color:#557766;
color:#FFFFFF;
display:block;
}
</style>

<table class="cal">
<tbody>
<tr class="fish">
<td class="mon"><span>1</span></td>
<td class="mon">2</td>
<td class="mon">3</td>
</tr>
<tr>
<td class="mon">4</td>
<td class="mon"><span>5</s...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

Q外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか

外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか?


以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、
「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。
「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。


【例 : 外部スタイルシート】
.main {
color : red;
text-align : center;
}

.main.sub1 {       ←実際はこのような指定ではできない
text-align : left;
}

.main.sub2 {       ←実際はこのような指定ではできない
color : blue;
}


【例 : htmlファイル】
<div class="sub1">あいうえお</div>  ←左寄せ&赤字にしたい
<div class="sub2">あいうえお</div>  ←センタリング&青字にしたい

外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか?


以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、
「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。
「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。


【例 : 外部スタイルシート】
.main {
color : red;
text-align : center;
}

.main.sub1 {       ←実際はこのような指定ではできない
text-align : left;
}

...続きを読む

Aベストアンサー

#2です。

> .main.sub1 {       ←実際はこのような指定ではできない
一応、その書き方も有りです。
例えば、以下のように。

--------
<style type="text/css"><!--
.main { color: orange; text-align : center; }
.main.sub1 { color: blue; }
--></style>
</head>
<body>
<div class="main sub1">あいうえお</div>
--------

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qスタイルシートで colspan=3と定義することは可能でしょうか?

<style>
x {

}
</style>

<table>
<tr>
<td colspan=3 class="x">タイトル</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>

また、有名なブラウザで対応している最新のCSSバージョンは何でしょうか?

よろしくお願いいたします。

Aベストアンサー

できないと思います。

colspan は、セルを連結する指定ですが、
もともと
<td></td><td></td><td></td>
であったものが
<td colspan=3></td>
のように連結するには、他の"<td></td><td></td>"を削除する必要があります。
それは、スタイルだけの話ではなくてセルの実体を操作する必要があるということですから。

QCSS スタイルを子要素の子要素に継承させたくない

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<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>個々にクラスを指定すれば(不必要なタグには指定しなければ)可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。

どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか?

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<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 {…} という指定の方法もあるようで...続きを読む

Aベストアンサー

微妙に把握してませんがこう?

table.border table.none td {
border:0px none;
}

「css 優先順位」などで検索するといろいろヒットしますよ


人気Q&Aランキング