スタイルシートでテーブルの行の高さを指定する時は、
全ての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>
No.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>
No.2
- 回答日時:
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 )
も参考になるかと・・
No.1
- 回答日時:
CSS --Cascading Style Sheetsですのでカスケーディングを活用しましょう。
--結論は明白です。タイプセレクタで詳細度の低いレベルで指定して、必要な場合はより高い詳細度で上書きする。style属性は詳細度が1000なので、限定された場所以外は使わない。
⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
HTML5で、テーブル内tdタグの高さを常に固定に
HTML・CSS
-
<table>の高さ固定。情報増加時、高さ自動変化
HTML・CSS
-
tableのheight指定が効かない
HTML・CSS
-
-
4
テーブル内の文字サイズを変更したい。
HTML・CSS
-
5
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
6
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
7
テーブル内のテーブルの高さを揃えたい。
HTML・CSS
-
8
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
9
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
10
同じIDで定義した要素の配列を取得したいが
JavaScript
-
11
ブラウザによってテーブルのセルの高さが変わる
HTML・CSS
-
12
visual studio でインデントを自動的に揃えるショートカットキー
その他(プログラミング・Web制作)
-
13
ヘッダー固定のスクロールが可能なテーブルの作成
HTML・CSS
-
14
テーブルの任意の列を非表示にしたい
HTML・CSS
-
15
自動的に高さ指定していないtdの高さを取得したいのですが
JavaScript
-
16
「指定されたキャストは有効ではありません。」とエラーが出てしまいます。
Microsoft ASP
-
17
CSSで特定のテーブルだけに適用する記述をおしえてください。
HTML・CSS
-
18
ループ処理の際、最後だけ,"をつけたくない"
Java
-
19
SELECT INTOで一度に複数の変数へ代入をするにはどのようにすれがよいでしょうか?
PostgreSQL
-
20
テーブルの位置を細かく指定したい。
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルのヘッダとボディの幅...
-
tableにul,または,olを入れられ...
-
文字列が入っているtdを削除せ...
-
cssで、表示されるテキストによ...
-
テーブルの任意の列を非表示に...
-
表組の均等割り付け
-
テーブルのセルに画像をピッタ...
-
safariで特定条件下でデーブル...
-
TRタグの余白をcssで設定するには
-
テーブル(表)を2つ横に並べて...
-
Htmlのtd要素の中で半角の空...
-
表の1列だけをCSSを使って右揃...
-
テーブルの行の高さを指定する...
-
エクセルをhtml変換した、html...
-
HTMLのテーブルで桁をそろ...
-
ホームページ 表の上の余白を...
-
スタイルシートで colspan=3と...
-
EXCELからhtmlへの変換で罫線が...
-
HTML <td></td>タグ セル内余...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
HTML <td></td>タグ セル内余...
-
cssで、表示されるテキストによ...
-
テーブルの表示がずれます
-
テーブルの行の高さを指定する...
-
中に<table></table>が使えるア...
-
テーブルのセルに画像をピッタ...
-
スタイルシートで colspan=3と...
-
ホームページ 表の上の余白を...
-
EXCELからhtmlへの変換で罫線が...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
逆L字の表(table)組み
-
テーブルタグのセルの幅の一部...
-
HTMLで外部ファイルの読み込み
-
表の中の列の順番を入れ替える...
おすすめ情報