<tr>タグにCSSでborder-bottomを設定することで、

テーブルの一行ごとに下線を引きたいのですが、どうしたらよいでしょうか。

<tr>タグにはborderを設定できないのでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/07/24 13:12:26
  • 終了:2007/07/31 13:15:03

回答(7件)

id:erika8047 No.1

erika8047回答回数21ベストアンサー獲得回数02007/07/24 13:48:17

ポイント18pt

一行ごとというのは、ノートのような罫線を引きたいということでしょうか?

border-bottomでtrに設定しても、テーブルのセルごとの下部に線がつくだけですので罫線のような効果は得られないと思います。

http://iswebmag.hp.infoseek.co.jp/sample203.html

こちらにあるように、罫線ぽい背景画像を用意し、それにあわせてfont-sizeやline-heightを設定すれば罫線ぽくなりますよ。薄いグレーの細めの線でそういったものを作っているサイトが多いように見受けられます。

id:tetlis

> border-bottomでtrに設定しても、テーブルのセルごとの下部に線がつくだけ

これを望んでいます。が、一切ボーダーが出ないのです。

何か私が初歩的なミスをしているのでしょうか。

ただ、教えていただいた情報はとても有用でした。

ありがとうございます。

2007/07/24 15:12:22
id:rifugio No.2

ときときと回答回数41ベストアンサー獲得回数32007/07/24 16:16:22

ポイント17pt

trではなく、tdにborder-bottomを設定したらどうでしょう。

IE6.0では出ますが、ほかのブラウザはうまくいかないかもしれません。


http://q.hatena.ne.jp/1185250345

id:tetlis

最悪tdですが、無理ということがはっきりしない限りはtrでの方法が知りたいです。

2007/07/24 16:35:28
id:tezcello No.3

tezcello回答回数460ベストアンサー獲得回数692007/07/24 17:11:08

ポイント17pt

http://msugai.fc2web.com/web/tips/tableborder.html

<table frame="below" rules="rows">
<tr><td>123</td><td>いろは</td><td>ABC</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>

こんなのはダメですか?

id:mj99 No.4

mj99回答回数138ベストアンサー獲得回数382007/07/24 17:23:23

ポイント17pt

http://www.w3.org/TR/CSS21/tables.html#borders

http://hp.vector.co.jp/authors/VA022006/css/tables.html#border-c...


CSS2.1の仕様では、table要素のborder-collapseプロパティがcollapseの場合のみ、tr要素のborderプロパティが有効なようです。

(border-collapseプロパティのデフォルトはseparate)


FireFoxはこれを忠実に実装しており、下記ソースで下線が表示されます。

border-collapseを省略、またはseparateにすると下線は出ません。

<style>
table.note {
  border-collapse:collapse;
}
table.note tr {
  border-bottom: 1px solid red;
}
</style>
<table class="note">
  <tr>
    <th><p>aaaa</p></th><td><p>bbb</p></td>
  </tr>
  <tr>
    <th><p>aaaa</p></th><td><p>bbb</p></td>
  </tr>
  <tr>
    <th><p>aaaa</p></th><td><p>bbb</p></td>
  </tr>
</table>


IEでの実装がはっきりしませんが、どうもtrのborderは一切効かないようです

(style自体が効かないわけではない、height、backgroundなど効果のあるプロパティはいくつもある)


----

以下、IE用の参考。

<style>
table.note {
  border-collapse:collapse;
}
table.note th, table.note td {
  padding:0em;
  border-bottom: 1px solid red;
}
</style>
id:Marine-Blue No.5

Marine-Blue回答回数237ベストアンサー獲得回数122007/07/24 17:27:33

ポイント17pt

> 最悪tdですが、無理ということがはっきりしない限りはtrでの方法が知りたいです。

FirefoxやOperaなど対応環境ではborder-collapseプロパティにcollapceを適用するとtr要素に指定されたborder-styleが反映されますが、IE6ではborder-styleがtr要素に適用されません。

また、対応ブラウザでも表示に差異の生じるケースがあるようですので現状だと使うのは好ましくないでしょう。

http://www.zspc.com/documents/css2/box/borderstyle.html

table {
border-collapse:collapse;
}
tr {
border-bottom:1px #00FF00 solid;
}
id:erika8047 No.6

erika8047回答回数21ベストアンサー獲得回数02007/07/24 19:07:18

ポイント17pt

http://www.tagindex.com/kakolog/q3bbs/1/92.html

1で回答したものです。

質問の意味を取り違えていたようで申し訳ない。

上のURLを参照するところ、現在WinIEではtrにborderはつかないそうです。ただし別の方法で似たような見た目にすることは出来るようです。

1.

th, td { border-bottom: 1px solid #555; }

2.

table { border-collapse: collapse; }

を指定したうえで、

<table frame="hsides" rules="rows">

何度もすみませんでした。

参考になれば。

id:wizemperor No.7

wizemperor回答回数379ベストアンサー獲得回数522007/07/24 20:21:08

ポイント17pt

tableに border-collapse: collapse を指定します。

style要素や外部ファイルに各場合は次のように。

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid black;
}

style属性を使う場合は次のように。

<table style="border-collapse: collapse;">
<tr style="border-bottom: 1px solid black;">
  <td></td>
</tr>
</table>

で思い通りになるかと思います。


http://q.hatena.ne.jp/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません