HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折りたたみなどの方法を変更してもあまり効果的ではありません。ここで便利なちょっとしたコツを見つけました。これを実現するには、表示属性 + マージンを使用します。
例：

tr{マージントップ:0px;パディング:0px;ディスプレイ:ブロック;}

比較してみましょう

tr{マージントップ:-10px;パディング:0px;ディスプレイ:ブロック;}

行間隔が大幅に短くなったことがはっきりとわかります。

その他の解決策

質問：

テーブル内のtrのデフォルトの表示はdisplay:table-rowです。display:blockに変更することもできますが、(tdの自動配置)などのtr独自の表示効果が失われます。

また、tr に padding を設定すると、内側の余白を増やすことができるので便利ですが、margin を設定するのは無意味です。tr の外側のスペースは依然として 0 のままです。

解決：

2 つの CSS プロパティ: border-collapse:collapse /separate & border-spacing:10px 10px;

tr の間隔を制御するには、border-collapse と border-spacing を使用する必要があります。

のように：

<table style="border-collapse:separate; border-spacing:10px;">
    <tr></tr>
</テーブル>

HTML テーブルの行間を変更する例についての記事はこれで終わりです。HTML テーブルの行間に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。