質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

10039閲覧

Tableのtrごとに枠色を変えたい

plue

総合スコア71

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/04/09 04:59

HTMLで作成したTableの行(tr)ごとに枠色を変えたいと思っています。
しかし現状では各行のborder-top-colorが、
1つ前の行のborder-bottom-colorで上書きされているように表示されてしまいます。
きちんと各行を希望の色で囲んで表示するにはどうすればよいでしょうか?
ご存知の方がいらっしゃいましたら、ご教授お願い致します。

<このように表示したい>
※以下のイメージでは行と行のに隙間がありますが、理想は隙間がなく表示したいです。
![イメージ説明]WIDTH:348

<現状の表示>
![イメージ説明]WIDTH:362

lang

1<!DOCTYPE html> 2<html lang="ja"> 3<body> 4 <table> 5 <tr class="black"><td>あ</td><td>い</td><td>う</td></tr> 6 <tr class="red"><td>か</td><td>き</td><td>く</td></tr> 7 <tr class="black"><td>さ</td><td>し</td><td>す</td></tr> 8 </table> 9</body> 10</html> 11 12<style type="text/css"> 13table { 14 border: 1px #000 solid; 15 border-collapse: collapse; 16} 17 18tr.black { border: 1px #000 solid; } 19tr.red { border: 1px #F00 solid; } 20--> 21</style>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

以下のCSSで思いどおりの表示になるかと思いますがいかがでしょうか?

lang

1 2table { 3 border: 1px solid; 4 border-collapse: collapse; 5} 6 7.black td { 8 border: 1px solid; 9 border-bottom: none; 10} 11 12.red, 13.red td { 14 border: 1px #F00 solid; 15}

投稿2015/04/09 06:03

ryota_kimura.jp

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

plue

2015/04/09 06:56

回答ありがとうございます。 回答のcssを適用してみたところ、黒枠のborder-bottomが消えてしまいました。 希望としては黒枠の行も赤枠の行も、上下左右をその色の枠で囲みたかったのですが、私の質問の文章が伝わりにくく申し訳ありません。 迅速に回答をいただけて本当に感謝しております。
ryota_kimura.jp

2015/04/09 07:04

あっ、すみませんでした!汗 文章を見落としていました。
guest

0

ベストアンサー

tableに対して以下のようにcssを設定すればいいと思います。
・border-collapse : separate
・border-spacing : 0 1px
間隔を変えたい場合にはborder-spacingの1pxの部分を変更すればできるはずです。
間隔を変えて隙間をうめればできると思います。

投稿2015/04/09 05:46

編集2015/04/09 05:48
orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

plue

2015/04/09 06:51

回答ありがとうございます。 いただいた回答をもとにやってみたところ、希望の表示とすることができました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問