はじめての親子ハイキングに挑戦!! >>

テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。
なぜでしょうか?

<style="text/csss">
<!--

hr.kasen {
border-bottom-style: double;
}

-->
</style>

<table>
<tr class="kasen">
<td>あ</td>
</tr>
</table>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

hrはtrの間違いとして・・・



trにborderを付けても反映されないブラウザがあるはずです。
(何がダメで何がOKかは忘れましたが)
私は

tr.kasen td{
border-bottom-style: double;
}

としてます。
separateでセル間≠0の場合は切れ切れになってしまいますが。
    • good
    • 0

私の場合、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_ …
のテーブルを参照したら。
「border-collapse:collapse」で指定されていますか。

IE・Firefox・Ssfari・Google Chrome・Operaでは、<td class="d2">で全て対応していますが。
tableを使用しないで全てcssの作成の場合は、セルの結合が有る場合ブラウザでスタイルシート変更が必要のようですが

参考URL:http://www5e.biglobe.ne.jp/~access_r/hp/css/css_ …
    • good
    • 0

あなたの書いた表のどこにもhrは現れませんね。

trの間違いだと思
うので、styleの指定を hr.kasenからtr.kasenにしてください。

素直に.kasenだけにしとけば、hrでもtrでも適用されるので幸せ。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルのボーダーを下線のみ表示

Dreamweaber8を使っています。

タイトル通り、テーブルのボーダーを
下線のみ色を付けて表示する方法はありますか?

過去の質問等も見ましたが、解決しませんでした。
わかる方いらっしゃいましたらお願いします。

Aベストアンサー

テーブルは基本的には枠全体の指示しかできなかったと思います。
下のみ上のみというのはなかったと思うので、
この場合はCSSを組み合わせてboreder-bottom:1px solid #colorなんかで下線が表示されるようにするのが
一番簡単かもしれません。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QTD、THタグ内の水平罫線(HR)の使用について

テーブルタグの TH, TD 内にHR(水平の罫線)を引くのですが
これは使っても良いのでしょうか?

<table>
<tr>
<td>
テスト1
<hr>   <!-- ここ -->
テスト2
</td>
</tr>

動作はしているのですが、お勧めできないことでしたら、やめようと思います。

中にテーブルタグで分けるのが面倒なので、水平罫線<HR>で出来れば便利だと思いまして質問しました。

他に何か見栄えも良くておすすめできるものがありましたら教えてください。

Aベストアンサー

> テーブルタグの TH, TD 内にHR(水平の罫線)を引くのですがこれは使っても良いのでしょうか?

文法上は間違いではないです。

> 動作はしているのですが、お勧めできないことでしたら、やめようと思います。

hrは、あるひとかたまりの内容がここから違うひとかたまりの内容に変わりますよ、という目印としての区切り線といった意味を持つものですので、質問者様のソースの場合、「テスト1」と「テスト2」の内容がそういった性質のものであるかどうかによって、論理的に適切かどうか(「お勧め」できるか否か)は違ってきます。
あと、tableは「表」ですので、表のデータの中にそのhrが出現する様な性質のものが出てくるケースというのがちょっと想像できない(有り得ないとは言いません)のですが、もしかしてこの<table>~</table>は「表」としてではなく、レイアウトをする為だけに使っていますか?(本来それは推奨されない事なのですが、今回の質問はその事ではないので無視しておきます)であれば、hrを使う様な内容があっても不思議ではないですが。

以下の様なサンプルで、hrの使い方の感じが掴めますでしょうか。
---------------------------------------------------------------------
私はペットを沢山飼っている。それを紹介する。

<p>犬の話題…</p>
<hr>←ここで話題が変わるので挿入
<p>猫の話題…</p>
<hr>←ここで話題が変わるので挿入
<p>ハムスターの話題…</p>
---------------------------------------------------------------------

> 他に何か見栄えも良くておすすめできるものがありましたら教えてください。

単にブロックとブロックの間に線を引きたいという見た目の問題だけなら、CSSでborderプロパティを使えば線の形状・色・太さ・線とテキストとの間隔も自在です。

> テーブルタグの TH, TD 内にHR(水平の罫線)を引くのですがこれは使っても良いのでしょうか?

文法上は間違いではないです。

> 動作はしているのですが、お勧めできないことでしたら、やめようと思います。

hrは、あるひとかたまりの内容がここから違うひとかたまりの内容に変わりますよ、という目印としての区切り線といった意味を持つものですので、質問者様のソースの場合、「テスト1」と「テスト2」の内容がそういった性質のものであるかどうかによって、論理的に適切かどうか(「お勧め」でき...続きを読む

QEclipseでのJDBCドライバについて

Eclipse3.1でデータベース(mysql)にアクセスするプログラムを作ったのですが下記のエラーが出ます。

java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

これはJDBCドライバのセットアップがうまく出来ていないからなのでしょうか?
またEclipseでは、~.jarというファイルをプロジェクトのWEB-INFのlibフォルダに入れれば使える印象があるのですが、参考書(EclipseのではなくJAVAなどの)などにあるようにTomcatのインストールフォルダ以下common/libに入れて環境変数を変更しないといけないのでしょうか?

ご存知の方教えてください、よろしくお願いします。

Aベストアンサー

WEB-INF以下に入れると実行はできるのですが、エクリプスが.javaファイルをコンパイルすることができません。projectの一覧を右クリックしてpropertyを選択し、ダイアログ右側からJava Build Pathを選択し、タグからLibrariesを選び、Add JARsボタンをおして.jarファイルを登録して下さい。
たぶんこれでコンパイルできるはずです。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q[CSS] tableの行の間隔をあける

table {
 border-collapse: separate;
 border-spacing: 5px;
}

とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか?

イメージ的には以下の様な感じです

<table>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
</table>

よろしくお願いします

Aベストアンサー

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="見本の表"] th,
table[summary="見本の表"] td{
border:solid 1px green;
width:10em;
text-align:right;
}
table[summary="見本の表"] th{
border-color:red green;
text-align:center;
}

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="...続きを読む


人気Q&Aランキング