padding 一つにまとめるには?css
<html>
<head>
<title>test</title>
<style type="text/css">
td{padding:10;}
</style>
</head>
<body>
<table border=1>
<tr><th>a</th><th>b</th></tr>
<tr><td>c</td><td>d</td></tr>
</table>
</body>
</html>
これで、
cとdの行のtdタグの表の幅は設定できますが、
全ての行の表の幅を1行のcssで設定するにはどうすればいいでしょうか?
table{padding:10;}
とすると、
表の幅は0になってしまい、テ^ブルの中の幅が広がってしまいます。
tr{padding:10;}
にすると何もcssが適用されてないのと同じ状態になります。
th{padding:10;}
td{padding:10;}
で理想の形になるのですが、
なぜ
tableやtrでは出来ないのでしょうか?
1つにまとめられないのですか?
添付画像は理想の形です。
投稿日時 - 2015-12-27 18:10:36
このQ&Aは役に立ちましたか?
0人が「このQ&Aが役に立った」と投票しています
回答(2)
質問者さんが書いたHTMLを、もう少し細かく分解してみました。このサイトでは半角スペースが使えないようなので、申しわけありませんが全角スペースを使っています。もし真似される場合は、行頭の全角スペースを半角に直してください。
<table border="1">
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
これをご覧いただくとわかると思いますが、aとbは<th></th>のなかに、そしてcとdは<td></td>のなかに入っていますね。だからこそ、<th>と<td>に対してCSSを書いてあげるわけです。反対に、<tr>は<th>や<td>の外側にあるため、ここにCSSを書いてもうまく動きません。また、<table>に書いてしまうと、一番外側のボックス(a, b, c, dを囲っている、一番外側の四角形)に対してCSSを書いていることになります。
したがって<th>と<td>に対して、
th{padding:10;}
td{padding:10;}
と書いてあげるのが正しいわけです。
もし一行でまとめたい場合は、1番さんのように
th, td { padding: 10; }
と書いてください。th, tdとコンマで区切ってあげると、複数のHTML要素に対してCSSを指定できます。
参考URL:http://htmq.com/selector/selectors.shtml
投稿日時 - 2015-12-27 22:57:58
ありがとうございます。
投稿日時 - 2016-01-02 23:39:05