CSS を使用するとテーブル行の下枠が表示されないのはなぜですか?

表の行の下部に枠線を追加する方法

3x3 の表があり、各行の下部に枠線を追加したいとします。 style 属性を に直接追加しようとしました。要素がありましたが、うまくいきませんでした。次に、次のような CSS を追加しました:

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

しかし、それでも機能しませんでした。 CSS を使用したいので、すべての行に style 属性を追加する必要はありません。

問題は、border-collapse:collapse をテーブル ルールに追加していないことです。このプロパティは、ブラウザーに隣接するセルの境界線を折りたたむように指示します。これがないと、境界線が重なって描画され、線が見づらくなります。

問題を解決するには、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>

これにより、行の各行の下部に 1 ポイントの黒い境界線が追加されます。テーブル。

以上がCSS を使用するとテーブル行の下枠が表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。