- ベストアンサー
CSSで列の幅を調整する方法
- CSSでテーブルの列の幅を調整する方法について教えてください。
- 指定した列のみの幅を調整する方法を教えてください。
- テーブルのタグを直接いじるのではなく、スタイルシートで列の幅を調整する方法を教えてください。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
対象セルにクラスをつけて指定するという方法はダメでしょうか？ <style> td.column { width:10% } </style> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td class="column">c</td></tr> <tr><td>1</td><td>2</td><td class="column">3</td></tr> </table> ターゲットブラウザにもよりますが、nth-childはモダンブラウザにしか効きませんのであまりおすすめできません。 それとサイズを厳密に調整したいのであればborder,cellpaddingは0にして全てスタイルで指定したほうがいいと思います。なぜならwidth=10%+cellspacing+border+cellpaddingになってしまいますから。
その他の回答 (4)
- yambejp
- ベストアンサー率51% (3827/7415)
＞できれば直接テーブルのタグをいじるのではなく、 とおっしゃいますが、実際列を処理するなら<col>など列に対して 処理する方がいいと思いますけどね また余計なお世話だと思いますがclassを設定するのが賢明です。 <style> table {width: 100%;} col.col3 {width: 10%;background-Color:lime;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <col><col><col class="col3"> <tbody> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </tbody> </table>
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に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://okwave.jp/qa/q8788064.html ) で色々な例紹介してます。 いずれにしてもカスケーディングはカスケーディングスタイルシートCSSの根幹となる仕組みですから、プロパティより先に理解しておかないと使いこなせないですよ。 ＞できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。 すべての要素に対して、HTMLは一切弄らずにスタイルの指定はできます。 それが、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」、スタイルシートを使う目的なのですから 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) なによりも、兎にも角にも、この二項目は完璧にマスターしましょう。 ※細かい点ですが <table border=1 cellspacing=1 cellpadding=1>ではなく <table border="1" summary="表の説明"> とするように、cellspacing,cellpaddingは、HTML4.01strict以降はありませんので・・ スタイルシートを使って設定しましょう。
お礼
ありがとうございました。
- hitomura
- ベストアンサー率48% (325/664)
つ 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
- ベストアンサー率37% (183/489)
td:nth-child(3) { スタイル } タグをいじれないならこう。 css3だから対応しないブラウザもまだある。 http://weboook.blog22.fc2.com/blog-entry-268.html セレクタについてどうぞ、探してみたら他にも方法があるかも？
お礼
ありがとうございました。
お礼
ありがとうございました。