ボーダーボトムをテーブル行に追加<tr>

3 x 3のテーブルがあります。すべての行の下部に境界線を追加しtrて、特定の色を付ける方法が必要です。

最初に私は直接的な方法、すなわち：

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

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

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

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

styleすべての行に属性を追加する必要がないため、CSSを使用したいと思います。にborder属性を追加していません<table>。それが私のCSSに影響を与えないことを願っています。

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

<tr class="border_bottom">

CSS：

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

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

table { 
    border-collapse: collapse; 
}

リンク

使用border-collapse:collapseテーブルの上やborder-bottom: 1pt solid black;TRに

使用する

border-collapse:collapse ネイサンが書いたように、あなたは設定する必要があります

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

ここには多くの不完全な答えがあります。あなたが境界線を適用することはできませんのでtr、タグ、あなたはそれを適用する必要があるtdか、thそうようなタグ：

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

これを行うと、各の間に小さなスペースtdが残ります。境界線をtrタグのように表示したい場合、これは望ましくない可能性があります。いわば「ギャップを埋める」border-collapseには、table要素のプロパティを利用してcollapse、次のように値をに設定する必要があります。

table {
  border-collapse: collapse;
}

使用する

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

「薄いソリッド」をCSSプロパティに置き換えます。

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

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

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

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

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);
}

追加してみました

    table {
      border-collapse: collapse;
    }   

と一緒に

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

次に、border-collapseをコメントアウトして、何が機能しているかを確認しました。下ボーダーのプロパティを持つtrセレクターを使用するだけでうまくいきました！

ボーダーCSSなし。

ボーダーフォトライブなし

CSS Border ex

ボーダー写真のライブテーブル

この方法を使用したときに、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;
}

<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つの境界すべてに同時に適用されます。

詳細はこちら（およびオンラインでお試しください）

いくつかの興味深い答え。ボーダーの下（または上）が必要なだけなので、ここに2つあります。あなたが3pxの太さの青い境界線が欲しいと仮定します。スタイルセクションに追加できます

.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>

これに対する別の解決策はborder-spacingプロパティです：

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

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

CSSボーダー下部なし：

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

tr要素にボーダーを置くことはできません。これは私にとってFirefoxとIE 11で機能しました：

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

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}