人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

<tr>タグにCSSでborder-bottomを設定することで、
テーブルの一行ごとに下線を引きたいのですが、どうしたらよいでしょうか。

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

●質問者: tetlis
●カテゴリ:インターネット ウェブ制作
✍キーワード:border CSS タグ
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● erika8047
●18ポイント

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

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

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

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

◎質問者からの返答

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

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

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

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

ありがとうございます。


2 ● ときときと
●17ポイント

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

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


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

◎質問者からの返答

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


3 ● tezcello
●17ポイント

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>

こんなのはダメですか?


4 ● mj99
●17ポイント

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>

5 ● Marine-Blue
●17ポイント

> 最悪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;
}

1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ