- ベストアンサー
テーブルの行の高さを指定する方法について知りたい
- テーブルの行の高さを指定する際、全てのtdタグにスタイルシートを指定するべきか、1つだけ指定すれば良いのか疑問です。
- 全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。
- コードを書く上でどちらが適切か教えてください。
- JLFLCFZECWLSX
- お礼率80% (33/41)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （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>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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-html401j/struct/tables.html#h-11.3 )」に従いますから、外見上はどこに指定してもその業はその高さ、もしくは内容の量に合わせて一定になりますが、その整形と、スタイルシートは意味がまったく異なります。 先日の 特定のテーブルのみ枠線の色を消したい( http://okwave.jp/qa/q8665634.html ) も参考になるかと・・
お礼
回答ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSS --Cascading Style Sheetsですのでカスケーディングを活用しましょう。--結論は明白です。 タイプセレクタで詳細度の低いレベルで指定して、必要な場合はより高い詳細度で上書きする。style属性は詳細度が1000なので、限定された場所以外は使わない。 ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
お礼
回答ありがとうございました。
お礼
回答ありがとうございました。