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

質問する
マイページ

ログイン

<< 前の質問 | 次の質問 >>

解決済みの質問

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

phmjtathtahi

困ってます

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

th, td{padding:10;}

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

お礼

ありがとうございます。

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

回答を評価する （0）
通報する

ANo.1

coai

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

はい

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

回答（2）

ANo.2

Katsu_Kaiz

質問者さんが書いた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;}
と書いてあげるのが正しいわけです。

もし一行でまとめたい場合は、１番さんのように
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

回答を評価する （0）
通報する

ページTOP