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

締切り済みの質問

CSS3のnth-childが上手くいかない

テーブル内のテキスト配置をtext-align: center;にします。
左側の2番目以降をtext-align: left;にしたいです。
どうやったら良いでしょうか?
宜しくお願いします。

投稿日時 - 2019-05-20 11:37:38

QNo.9618355

困ってます

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

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

回答(2)

>一番上の「1ヒート」も左になってしまいますが…
だから、最初のタグは、TDではなくTHなんです。
先頭とそれ以降を区別するためなので。

THのデフォルトはセンターなので、resetCSSをしてCSSが
リセットされている場合は、THタグにも、
センター属性をつけてあげればOKですよ。
先ほどのソースをそのまま、Chromeで表示すると、
「1ヒート」の部分もセンターになるので、
その時に適応されているデフォルトのCSSを
今の環境で設定すれば、それで完了です。
ただ。。
それだと、全部のTABLEが同じ結果になってしまうので、
気になるようでしたら、
table#name でID分けしたほうが、安全かもしれません。
ー>もちろん、使う時もtable id=nameで選択もしつつ。

投稿日時 - 2019-05-20 13:45:56

お礼

そうですね。クラス名で調整すれば良いですね。

投稿日時 - 2019-05-20 17:05:30

<style>
table tr td {
/* これは深い意味はなく、centerになったことをわかるよう余白を作ってるだけ */
width:320px;
}
table tr td:last-child {
text-align:center;
}
</style>

<table border=1>
<tr>
<th>あいうえお</th><th>123</th>
</tr>
<tr>
<td>あいうえお</td><td>123</td>
</tr>
<tr>
<td>あいうえお</td><td>123</td>
</tr>
<tr>
<td>あいうえお</td><td>123</td>
</tr>
</table>
これでいいのかな?
各TABLE内のTR内に配置された「最後のTD」要素にセンターを
指定しただけです。
#ただし、デフォルトのCSSを一部使用していますので、
THなどに属性がついていない場合は、個別で設定すればOKです。

投稿日時 - 2019-05-20 12:33:37

お礼

コメントありがとうございます。
一番上の「1ヒート」も左になってしまいますが…

投稿日時 - 2019-05-20 13:23:15

あなたにオススメの質問