cssで列の幅を調整するには？

Question

たとえば、

a	b	c
1	2	3

このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。指定した列のみのcssで幅を調整する方法を教えてください。できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。

phantom0112358 · Accepted Answer

対象セルにクラスをつけて指定するという方法はダメでしょうか？

a	b	c
1	2	3

ターゲットブラウザにもよりますが、nth-childはモダンブラウザにしか効きませんのであまりおすすめできません。それとサイズを厳密に調整したいのであればborder,cellpaddingは0にして全てスタイルで指定したほうがいいと思います。なぜならwidth=10%+cellspacing+border+cellpaddingになってしまいますから。

yambejp · Answer

＞できれば直接テーブルのタグをいじるのではなく、とおっしゃいますが、実際列を処理するならなど列に対して処理する方がいいと思いますけどねまた余計なお世話だと思いますがclassを設定するのが賢明です。

a	b	c
1	2	3

ORUKA1951 · Answer

単純にtd+td+td{width:10%;}

じゃまずいのですか？

CSS3(古いブラウザ無視してよいなら・・)
td:nth-child(3){width:10%;}
とか

その他、様々な選択できます。
tr{background-color:yellow;}
tr+tr{background-color:aqua;}
tr+tr+tr{background-color:lime;}
tr+tr+tr+tr{background-color:silver;}

先日回答した
cellpadding - HTML - 教えて！goo( http://oshiete.goo.ne.jp/qa/8788064.html )
で色々な例紹介してます。

　いずれにしてもカスケーディングはカスケーディングスタイルシートCSSの根幹となる仕組みですから、プロパティより先に理解しておかないと使いこなせないですよ。

＞できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
　すべての要素に対して、HTMLは一切弄らずにスタイルの指定はできます。
　それが、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」、スタイルシートを使う目的なのですから

5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　なによりも、兎にも角にも、この二項目は完璧にマスターしましょう。

※細かい点ですが
<table border=1 cellspacing=1 cellpadding=1>ではなく
<table border="1" summary="表の説明">
とするように、cellspacing,cellpaddingは、HTML4.01strict以降はありませんので・・
スタイルシートを使って設定しましょう。

とするように、cellspacing,cellpaddingは、HTML4.01strict以降はありませんので・・スタイルシートを使って設定しましょう。

hitomura · Answer

つ nth-child
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

でも3列目だけ変えたいというのなら列にそれなりの意味があるわけですから、
> 直接テーブルのタグをいじるのではなく
と言わずに col を追加したほうがいいと思うんだけどなぁ。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/col

Taiyonoshizuku · Answer

td:nth-child(3) { スタイル }

タグをいじれないならこう。

css3だから対応しないブラウザもまだある。

http://weboook.blog22.fc2.com/blog-entry-268.html

セレクタについてどうぞ、探してみたら他にも方法があるかも？

cssで列の幅を調整するには？

対象セルにクラスをつけて指定するという方法はダメでしょうか？

＞できれば直接テーブルのタグをいじるのではなく、

単純にtd+td+td{width:10%;}

つ nth-child

td:nth-child(3) { スタイル }

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング