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

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた)<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

2の例<br>(一番左の列だけclass="test"をいれた)<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

3の例<br>(スタイルシートは何も指定していない)<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

A 回答 (3件)

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。



<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>
    • good
    • 1
この回答へのお礼

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

お礼日時:2014/07/23 19:26

No.1です。

具体的に書いたほうが分かりやすいかと
カスケーディングは
ユーザーの最重要宣言>著者の最重要宣言>著者の指定>ユーザーの指定>ブラウザの指定
に従いましたよね。
そして、指定を読み込んでいきますが、該当する要素に対する指定をすべて拾い出して、詳細度で比較します。
優先度、詳細度が同じ場合は、後出のもので上書きされます。
詳細度は、全称セレクタ/HTMLの属性での指定は0、タイプセレクタは1、属性やクラスセレクタは10、一意セレクタは100、dtyle属性の指定は1000ですよね。

ですので、
table tbody tr th,table tbody tr td{}
は詳細度[0,0,0,4]です。

特定のtableに適用する場合はtableはsummary属性必須ですので、
table[summary="コーヒーの種類"] tbody tr td{}
とすると詳細度は[0,0,1,4]となりますから、順番に関わらず上記指定を上書きします。

また、3行目以降でしたら、
table tbody tr+tr td{}
で、詳細度は[0,0,0,5]になりますから、最初の指定は上書きされますが、二番目の属性セレクタでの指定では上書きできません。

table tr:nth-child(2n) td+td{}
とすれば、偶数行の二列目以降のtdの色を変えたりもできますね。詳細度は[0,0,,,4]

データをマークアップするという表の特性上、その描画は「視覚系ユーザエージェントによる表の整形( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」に従いますから、外見上はどこに指定してもその業はその高さ、もしくは内容の量に合わせて一定になりますが、その整形と、スタイルシートは意味がまったく異なります。

先日の
特定のテーブルのみ枠線の色を消したい( http://oshiete.goo.ne.jp/qa/8665634.html )
も参考になるかと・・

 

 
    • good
    • 1
この回答へのお礼

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

お礼日時:2014/07/23 19:26

CSS --Cascading Style Sheetsですのでカスケーディングを活用しましょう。

--結論は明白です。
 タイプセレクタで詳細度の低いレベルで指定して、必要な場合はより高い詳細度で上書きする。style属性は詳細度が1000なので、限定された場所以外は使わない。
 ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
    • good
    • 0
この回答へのお礼

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

お礼日時:2014/07/23 19:26

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

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


このQ&Aを見た人がよく見るQ&A