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