ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用するとテーブル行の下枠が表示されないのはなぜですか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-10 19:46:09292ブラウズ

Why Doesn't My Table Row Bottom Border Appear Using 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。