こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

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

QNo.9102211

困ってます

質問者が選んだベストアンサー

th, td{padding:10;}

投稿日時 - 2015-12-27 18:44:31

お礼

ありがとうございます。

投稿日時 - 2016-01-02 23:39:08

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

ANo.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

-広告-
-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-