２列目のみcssを適用させるには？

2023/11/03 05:26

このQ&Aのポイント

この質問では、２列目のみにCSSを適用する方法についての問題が取り上げられています。
質問者は、特定のセレクタを使用して２列目だけにスタイルを適用しようとしていますが、現在は２列目と３列目にCSSが適用されてしまっています。
質問者は、どのような方法を使えば２列目のみにCSSを適用することができるのか、アドバイスを求めています。

ベストアンサー

２列目のみcssを適用させるには？

2016/11/12 08:30

<html> <head> <title>test</title> <style type="text/css"> table.test td+td { padding-left:1em; } </style> </head> <body> <table class="test" border=1> <tr><th>No</th><th>タイトル(この列だけ左からの距離を指定する)</th><th>その他</th></tr> <tr><td>1</td><td>bbb</td><td>1</td></tr> <tr><td>2</td><td>ccc</td><td>2</td></tr> </table> </body> </html> このソースだと２列目と３列目にcssが適用されてしまいます。 table.test td+td の部分は、okwaveからのコピペで見よう見まねでやってみたのですがどうすれば「２列目だけ」を指定できますか？このソースでの表示結果は画像の通りです。

LGJNTGZCB
お礼率67% (180/267)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

Katsu_Kaiz
ベストアンサー率58% (345/586)

2016/11/13 13:08 回答No.2

１番さんもおっしゃっていますが、CSS3の《E:nth-of-type(n)》というセレクタを使うといいです。これは、〇番目のHTML要素にだけCSSを適用するという、使いこなせるようになると便利なセレクタです。 ◆E:nth-of-type(n)－CSS3リファレンス　http://htmq.com/selector/nth-of-type.shtml 具体的には、 <style type="text/css"> table.test td:nth-of-type(2) { padding-left: 1em; } </style> というふうに記述すると、２列目だけにCSSが適用されます。td:nth-of-type(2)なので、上から数えて２番目の<td>にだけ、CSSを適用するという意味です。<td>1</td><td>bbb</td><td>1</td>だとすれば、<td>bbb</td>が２番目になりますね。なお、《td+td》は隣接セレクタと呼ばれるもので、２列目だけを指定するような場合には使えないと思います。 ◆隣接セレクタ－スタイルシートリファレンス　http://htmq.com/selector/adjacent.shtml

質問者

お礼 2016/11/25 21:42

どうもありがとうございました。

その他の回答 (1)

muuming2001
ベストアンサー率23% (202/845)

2016/11/12 08:52 回答No.1

http://weboook.blog22.fc2.com/blog-entry-268.html :nth-of-type(n)　 :nth-child(n) このあたり

質問者

お礼 2016/11/25 21:42

どうもありがとうございました。

関連するQ&A

一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで右側の2列目のtdタグを右詰にしたいのですが、一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
thのスタイルを適用するにはどうすればいいでしょう
<table border=1 class="test1"> の部分にclassを設定するだけで thのスタイルを適用するにはどうすればいいでしょうか？理想としては添付画像の下のテーブルの様に thの部分だけスタイルを適用したいのですが実際はテーブルのレコード数が多い為、 <th class="test2">を全てのthにつけるのを省略したいです。なので、<table border=1 class="test1">の部分にthのスタイルを設定したいのですが table.test1 {font-size: 5em;} の部分はどのように記述すればいいでしょうか？現在の table.test1 {font-size: 5em;} だとテーブルすべてに適用されてしまいます。理想の表示は下のテーブルで理想のソースは上のテーブルです。 ------------------ 以下ソース <html> <head> <style type="text/css"> table.test1 {font-size: 5em;} th.test2 {font-size: 5em;} </style> </head> <body> <table border=1 class="test1"> <tr><th>No</th><td>a</td></tr> <tr><th>No</th><td>a</td></tr> </table> <br> <table border=1> <tr><th class="test2">No</th><td>a</td></tr> <tr><th class="test2">No</th><td>a</td></tr> </table> </body> </html>
- ベストアンサー
- CSS
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つにまとめられないのですか？添付画像は理想の形です。
- ベストアンサー
- HTML
cssで列の幅を調整するには？
たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。指定した列のみのcssで幅を調整する方法を教えてください。できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
- ベストアンサー
- HTML
CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？教えてください☆
- ベストアンサー
- HTML
cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですがスタイルシートで行いたいです。そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり基本的には table { width: 100%; } をテーブルに設定したいのですがとあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後にクラスを使って該当のテーブルのみデフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですがテーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
テーブルの幅　余白をなくすことは可能ですか？
<html> <head> <title>test</title> </head> <style type="text/css"> table { width: 100%; } </style> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> </html> のようにテーブルの幅を１００％にしても両端に余白が出来てしまいますがこの余白をなくすことは可能ですか？添付画像はIEで表示させた状態ですがファイアフォックスなど他のブラウザで表示させても余白が出来ます。
- ベストアンサー
- HTML
CSSどこが・・・？
<html> <head> <style type="text/css"> .title { font-color:#00ff00; font-style:"ex phont"; } </style> </head> <body> <table> <tr><td class=title> タイトル </td> </table> </body> </html> こんなソースを作成したのですが、書体が変わらない上、文字色も変わりません。どこがおかしいのか自分にはわからないのですが・・・。教えていただけると幸いですよろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。線種はsolidを使いたいです。よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css">  </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS