テーブルの2列目のtdタグを右詰にする方法はありますか？
- この質問では、テーブルの2列目のtdタグを一気に右詰にする方法について尋ねられています。
- 現在は、各tdタグにクラスを付けることで右詰にしているが、一つ一つタグを付けるのは非効率的と感じている。
- 効率的な方法があれば教えて欲しいとのことです。
- ベストアンサー
一気に「テーブルの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> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ZRPGUOBOU
- お礼率88% (155/176)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
一番簡単な記述式ならこんな感じで… <style type="text/css"> table#test tr td+td { text-align:right; } </style> <table id="test"> <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> より詳しい技術的な解説は、 ＞CSSだけでテーブルの列(縦方向)を一括装飾 - http://allabout.co.jp/gm/gc/440534/ 上記サイトの解説などを参考に各々の環境に最適化してください。 P.S. 何事にも最初の一歩はあるが、誰しもがゴールに到達出来るとは限らない。
その他の回答 (1)
- kichikuma
- ベストアンサー率18% (202/1080)
私は、質問が非効率だと思っています。 そのため質問はしませんが、暇つぶしに回答してます。 回答 ありますよ。 http://touch.allabout.co.jp/gm/gc/440534/ 検索キーワードはこちらです。 『css table 列指定』
お礼
ありがとうございます。
関連するQ&A
- テーブルの一つのtdタグだけ、文字を小さく
テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- テーブルの線の幅を一重の線にしたい
<HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。
- ベストアンサー
- HTML
- テーブル列の表示／非表示機能の追加～その２
やりたい事は、AAAの列だけ常に表示させておき、BBB（つまり3列分）を表示／非表示になる・・といった事です。 下のHTMLで、変数bbbには「３」が入っているのは確認できましたが、後がさっぱり続きません。 どうぞよろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function hide(idName) { var aaa = document.getElementById(idName).childNodes; var bbb = aaa[0].length; alert(bbb); //--> </script> </head> <body> <button onClick="hide('list1')">隠す</button> <table border="1" cellpadding="2" cellspacing="1"> <tr> <th rowspan="3">AAA</th> <th colspan="3" id="list1">BBB</th> </tr> <tr> <th width="120">BBB1</th> <th width="120">BBB2</th> <th width="120">BBB3</th> </tr> <tr> <th>BBB11</th> <th>BBB21</th> <th>BBB31</th> </tr> <tr> <td>aaa</td> <td>aaa1</td> <td>aaa2</td> <td>aaa3</td> </tr> <tr> <td>bbb</td> <td>bbb1</td> <td>bbb2</td> <td>bbb3</td> </tr> <tr> <td>ccc</td> <td>ccc1</td> <td>ccc2</td> <td>ccc3</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- ２列目のみcssを適用させるには？
<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からのコピペで見よう見まねでやってみたのですが どうすれば「２列目だけ」を指定できますか？ このソースでの表示結果は画像の通りです。
- ベストアンサー
- HTML
- テーブルの行の高さを指定する時全てのtdタグに？
スタイルシートでテーブルの行の高さを指定する時は、 全てのtdタグにスタイルシートを指定するべきか、 １つだけ（一番左だけ）指定すればいいのかわからないので押してください。 全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。 コードを書く上でどちらが適切か教えてください。 -------------------------------------------------- <style type="text/css"> td.test {height: 50px;} </style> <body> １の例<br>（2列ともclass="test"を入れた）<br> <table border=1> <tr><td class="test">1</td><td class="test">2</td></tr> <tr><td class="test">3</td><td class="test">4</td></tr> </table> <br><br> ２の例<br>（一番左の列だけclass="test"をいれた）<br> <table border=1> <tr><td class="test">1</td><td>2</td></tr> <tr><td class="test">3</td><td>4</td></tr> </table> <br><br> ３の例<br>（スタイルシートは何も指定していない）<br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>
- ベストアンサー
- HTML
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- スタイルシートをhead内で定義したい
下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>
- 締切済み
- 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
- テーブル列の表示・非表示機能の追加
<table border="0" id="tbl1"> <tr> <th>A1</td> <th>B1</td> <th colspan="2">C1</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> </table> というテーブルで、C1列（要はデータcccとdddの2列）を表示／非表示を行いたいです。 調べてみたところ、colspanが設定されている例がありませんでした。 お判りになる方、よろしくお願いします。
- ベストアンサー
- JavaScript
- 同じクラス名はつけないほうが良いですか？
違うタグなら同じクラスの名前を付けてもいいでしょうか？ たとえば、 ********************************************** <STYLE type="text/css"> th.test{ width:15em; } td.test{ color:red; } </STYLE> </head> <body> <table border=1> <tr><th class="test">a</th><th class="test">b</th></tr> <tr><td class="test">c</td><td>d</td></tr> </table> ********************************************** のように、thタグとtdタグで同じｔｅｓｔというクラス名を付けても問題なく動作しますが このようなコードはほかの人から見てもきれいなコードと認識されますか？ 同じクラス名はつけないほうが良いですか？
- 締切済み
- HTML
お礼
ありがとうございます。