テーブルの行の高さを指定する時全てのtdタグに？

解決済

質問者：JLFLCFZECWLSX
質問日時：2014/07/06 10:33
回答数：3件

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

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

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

<style type="text/css">

td.test {height: 50px;}

</style>

<body>

１の例<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>

２の例<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>

３の例<br>（スタイルシートは何も指定していない）<br>

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Ogre7077
回答日時：2014/07/07 16:05

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

- 1
- 件

通報する

この回答へのお礼

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

通報する

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

No.2

回答者： ORUKA1951
回答日時：2014/07/06 12:18

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 )
も参考になるかと・・

　

　

- 1
- 件

通報する

この回答へのお礼

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

通報する

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

No.1

回答者： ORUKA1951
回答日時：2014/07/06 11:38

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

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