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 サイトの他の関連記事を参照してください。