ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用して表の各行に下枠を追加するにはどうすればよいですか?

CSS を使用して表の各行に下枠を追加するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-12 20:59:11
オリジナル
240 人が閲覧しました

How Can I Add a Bottom Border to Each Row of a Table Using CSS?

テーブル行の下部に境界線を追加する

質問

CSS を使用してテーブルの各行の下部に境界線を追加するのは難しいようです。 tr 要素を直接スタイル設定したり、CSS ルールを tr に適用したりしても、望ましい結果が得られませんでした。インライン スタイルを使用せずにこれを実現するより良い方法はありますか?

解決策

CSS を使用して表の各行の下部に境界線を正常に追加するには、border-collapse プロパティを使用できます。表の CSS ルールでこのプロパティを折りたたむように設定すると、表の枠線が結合されます。

table { 
    border-collapse: collapse; 
}
ログイン後にコピー

これにより、tr CSS ルールの border-bottom プロパティを使用して枠線スタイルを適用できるようになります。

tr {
  border-bottom: 1pt solid black;
}
ログイン後にコピー

3x3 を考えてみましょうtable:

<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>
ログイン後にコピー

CSS ルールを適用すると、各行の下部にのみ枠線があるテーブルが作成されます:

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}
ログイン後にコピー

以上がCSS を使用して表の各行に下枠を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート