html - 表の行にボーダーボトムを追加

Question

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

最初に、直接的な方法を試しました。つまり、次のとおりです。

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

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

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

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

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

Answer 1

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

table { 
    border-collapse: collapse; 
}

例

table {
  border-collapse: collapse;
}

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

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

リンク

Answer 2

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

<tr class="border_bottom">

CSS:

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

Answer 3

使用する

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

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

Answer 4

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

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

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

table {
  border-collapse: collapse;
}

Answer 5

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

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

Answer 6

Display the row as a block.

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

and to display alternate colors simply:

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

Answer 7

この方法を使用すると、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;
}

Answer 8

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

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

border-bottom-style、、、あります。border-top-style_ または、単純に 4 つの境界線すべてに一度に適用されます。border-left-styleborder-right-styleborder-style

ここで詳細を確認できます（およびオンラインで試してみてください）

Answer 9

下の CSS ボーダーなし:

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

Answer 10

HTML

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

CSS

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