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

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

ただいまの
回答率

90.61%

  • HTML

    8706questions

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

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 3,263

plue

score 67

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

<このように表示したい>
※以下のイメージでは行と行のに隙間がありますが、理想は隙間がなく表示したいです。
イメージ説明
<現状の表示>
イメージ説明
<!DOCTYPE html>
<html lang="ja">
<body>
    <table>
        <tr class="black"><td>あ</td><td>い</td><td>う</td></tr>
        <tr class="red"><td>か</td><td>き</td><td>く</td></tr>
        <tr class="black"><td>さ</td><td>し</td><td>す</td></tr>
    </table>
</body>
</html>

<style type="text/css">
table {
    border: 1px #000 solid;
    border-collapse: collapse;
}

tr.black { border: 1px #000 solid; }
tr.red { border: 1px #F00 solid; }
-->
</style>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

table {
    border: 1px solid;
    border-collapse: collapse;
}

.black td {
    border: 1px solid;
    border-bottom: none;
}

.red,
.red td {
    border: 1px #F00 solid;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/09 15:56

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

    キャンセル

  • 2015/04/09 16:04

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

    キャンセル

checkベストアンサー

0

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/09 15:51

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

    キャンセル

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

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    並んでいるiframeを両方センタリングするにはどうすればいいのでしょうか?

    並んでいるiframeを両方センタリングするにはどうすればいいのでしょうか? iframeを2つ並べて表示したいのですが、 alainや<center>を使ってもどうしても片一

  • 受付中

    画像の配置に関して

    こちらの複数の様々なサイズの画像同士の隙間を 均等にしつつ、尚且つ画像やテーブルはウィンドウサイズによって 可変する様に作成したいと考えておりますが、 どのように作成すればいいかが

  • 解決済

    JavaScript スクロールボックス内で特定の座標の要素を取得する方法

    いつもお世話になっております。 早速ですが質問させていただきたいと思います。 とあるシステムでデータベースで管理している情報を、 1件(1レコード)ごとにユーザが閲覧しやすい形に

  • 解決済

    h1を中央に揃えるには?

    このように、なぜか中央に行きません。なぜでしょうか。 <div class='img' style="position:relative;"> <img src="https:

  • 解決済

    CSSで文字をセンタリングしたい

    下記のプログラムで、 文字の位置を、上下中央寄せにしたいです。 text-alignは左右のみですよね。 どこを修正すればよろしいでしょうか。 xamlでいうと、vertical

  • 解決済

    テーブルの作り方で不明な点があります

    写真のようなテーブルを作りたいと考えています。 若干雑でごめんなさい。Aの長さは上の建物、3階建を合わせた長さと同じになります。 つまり紙で書いた位置に建物と3階建と書いた

  • 解決済

    Slickで画像スライドの実装を行う際の対象について

    前提・実現したいこと 現在、Slickを使って画像スライドの実装を行おうとしています。 その際に、画像を指定するタグをjQueryのappendで動的に生成しているのですが、そ

  • 受付中

    tableのレスポンシブ対応

    レスポンシブした際に、iphoneのsafariでtableのthとtdをdisplay:block;にし、width:100%;を指定しているのですが、td要素のみ画面幅いっぱい

同じタグがついた質問を見る

  • HTML

    8706questions

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