web-dev-qa-db-ja.com

表の行に境界下を追加する<tr>

私は3 x 3のテーブルを持っています。私はすべての行の下の境界線を追加する方法が必要ですtrそしてそれに特定の色を与える。

まず私は直接的な方法を試しました。

<tr style="border-bottom:1pt solid black;">

しかし、それはうまくいきませんでした。だから私はこのようにCSSを追加しました：

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

それでもまだうまくいきませんでした。

CSSを使用したいのですが、その場合はすべての行にstyle属性を追加する必要はありません。 <table>にborder属性を追加していません。それが私のCSSに影響を及ぼさないことを願っています。

htmlcsshtml-table
322
Sangram Nandkhile

私は以前このような問題を抱えていました。私はtrが直接ボーダースタイルをとることができるとは思いません。私の回避策は、行のtdをスタイルすることでした。

<tr class="border_bottom">

CSS：

tr.border_bottom td {
  border-bottom:1pt solid black;
}
351
tsherif

テーブルルールに border-collapse:collapse を追加します。

table { 
    border-collapse: collapse; 
}

リンク

451
Nathan Manousos

テーブルにborder-collapse:collapseを、trにborder-bottom: 1pt solid black;を使用

64
Jpduro

つかいます

Nathanが書いたようにborder-collapse:collapseとあなたが設定する必要があります

td { border-bottom: 1px solid #000; }

33
simoncereska

ここには不完全な答えがたくさんあります。 trタグに枠線を適用することはできないので、次のようにtdタグまたはthタグに枠線を適用する必要があります。

td {
  border-bottom: 1pt solid black;
}

こうすると、各tdの間にわずかなスペースが残ります。ボーダーをtrタグのように見せる場合は、望ましくない可能性があります。いわば「ギャップを埋める」ためには、table要素のborder-collapseプロパティを利用し、その値をcollapseに設定する必要があります。

table {
  border-collapse: collapse;
}
24
dmeyer

行をブロックとして表示します。

tr {
    display: block;
    border-bottom: 1px solid #000;
}

代替色を単純に表示するには：

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}
7
Jeremey

つかいます

table{border-collapse:collapse}
tr{border-top:thin solid}

"thin solid"をCSSプロパティに置き換えます。

7
Jesse

このメソッドを使用すると、td要素の間のスペースによって境界に隙間ができることがわかりましたが、心配はありません...

これを回避する1つの方法：

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

CSSでは：

td.end{
    border:2px solid black;
}
2
DaveTheRave

追加してみた

    table {
      border-collapse: collapse;
    }

と並んで

    tr {
      bottom-border: 2pt solid #color;
    }

それから何がうまくいったかを見るために国境崩壊をコメントアウトした下の境界を持つプロパティを持つtrセレクタを持っているだけでうまくいきました

いいえボーダーCSS ex。

No Border CSS ex.

ボーダー写真なし

No Border Photo live

CSSボーダーex。

CSS Border ex.

ボーダー写真付きライブテーブル

Table with Border photo live

1
MUFN

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

行全体にも同じことができます。

border-bottom-style、border-top-style、border-left-style、border-right-styleがあります。あるいは単にborder-styleを4つの境界線すべてに同時に適用します。

あなたは見ることができます（そして 自分を試してください オンライン）詳細 ここ

1
David Silva-Barrera

Tr要素に枠を付けることはできません。これは私にとってFirefoxとIE 11でうまくいきました。

<td style='border-bottom:1pt solid black'>
1
rod

いくつかの興味深い答え。境界線の下部（または上部）が必要なため、さらに2つあります。 3ピクセルの太さの青い境界線が必要だとします。スタイルセクションに追加できます

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

テーブルコードで

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
1
Howard Cary Morris

下のCSS枠なし：

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>
0
Gil Perez

これに対する別の解決策は border-spacing propertyです。

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}
<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>
0
Eugen Konkov

box-shadowプロパティを使用して、tr要素の境界線を偽造することができます。太さを調整するには、box-shadowのY位置（以下2pxで表す）を調整します。

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
0
Ian Bruce