- ベストアンサー
テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
hrはtrの間違いとして・・・ trにborderを付けても反映されないブラウザがあるはずです。 (何がダメで何がOKかは忘れましたが) 私は tr.kasen td{ border-bottom-style: double; } としてます。 separateでセル間≠0の場合は切れ切れになってしまいますが。
その他の回答 (2)
- k0021
- ベストアンサー率26% (32/120)
私の場合、tableを使用しないで全てcssの作成で、うまく表示しない場合は、tableで表示していますので、全て<td class="d2">で指定 .d2 {border-color:black;border-width:1px;} <table style="border-collapse:collapse">は、必ず指定いますが http://www5e.biglobe.ne.jp/~access_r/hp/css/css_property.html のテーブルを参照したら。 「border-collapse:collapse」で指定されていますか。 IE・Firefox・Ssfari・Google Chrome・Operaでは、<td class="d2">で全て対応していますが。 tableを使用しないで全てcssの作成の場合は、セルの結合が有る場合ブラウザでスタイルシート変更が必要のようですが
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
あなたの書いた表のどこにもhrは現れませんね。trの間違いだと思 うので、styleの指定を hr.kasenからtr.kasenにしてください。 素直に.kasenだけにしとけば、hrでもtrでも適用されるので幸せ。
関連するQ&A
- テーブルのスタイルを効率よく設定するには？
同じページに複数のテーブルがあり、別のスタイルを適用させたい。 ---- <style TYPE="text/css"> TABLE.A {border-style: solid; } TH.A { color: red; } TD.A { color: blue; } TABLE.B {border-style: double; } TH.B { color: green; } TD.B { color: black; } </style> <table class=A><tr><th class=A>A</th><td class=A>A</td></tr></table> <table class=B><tr><th class=B>B</th><td class=B>B</td></tr></table> --- <table><th><td>タグにclassを書けばいいのですが、もっとすっきりした方法はないでしょうか？
- ベストアンサー
- 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
- 一気に「テーブルの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
- スタイルシートテーブルの罫線を細くしたい
例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか？ <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシートのテーブル枠について
今までテーブルを利用してホームページに簡単な線を つけていました。これをスタイルシートで行うと 微妙にうまくできません・・・お助けください。 すべてＩＥで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが 線が１pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img src="ims/sps.gif" width="600" height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか？ 質問が、うまくまとまってなくてすみません・・・
- ベストアンサー
- HTML
- スタイルシートの書き方
HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな（？）スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか？ 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- スタイルシートを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> <STYLE TYPE="text/css"> <!-- h1 { font-size:50%;color:green; } '--> </STYLE> </head> <body> <h1> あああ <br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </h1> </body> </html> これだとブラウザで見た時にテーブルの外の文字しか適用されていませんが テーブルの中まで範囲は及ばないのでしょうか？ テーブルの中はテーブルの中専用のタグを作らないとダメでしょうか？ テーブルの外の文字と全く同じにしたいので一気に指定したいです。
- ベストアンサー
- HTML
- 表の作成をスタイルシートで
皆さんはHTMLで表を作成する際、どのように作成していますか？ 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。 ■□□ ■□□ ■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td class="title">6月7日</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td class="title">6月8日</td> <td>text</td> <td>text</td> <td>text</td> </tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01 {FONT-SIZE: 12px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF; } table.tb01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ; line-height:120%; border-color : #CDCDCD ; } td.title {background-color:#ECECEC; } ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。
- ベストアンサー
- HTML
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
