CSS テーブルのセルでマージンが機能しないのはなぜですか?代わりにスペースを追加するにはどうすればよいですか?

表のセルの余白

CSS で要素の表示プロパティを table-cell に設定すると、テーブルのような構造。ただし、表のセルは margin プロパティの影響を受けません。 margin プロパティは要素の境界線の外側にスペースを設定しますが、表のセルにはデフォルトで境界線がありません。

Cause

MDN ドキュメントによると、 margin プロパティは、table-caption、table、inline-table 以外の表表示タイプの要素を除くすべての要素に適用されます。したがって、テーブル セルは除外されるテーブル表示タイプの 1 つではないため、マージン プロパティはそれに適用されません。

解決策

目的を達成するには表のセル間の間隔を指定するには、代わりに border-spacing プロパティを使用します。 border-spacing プロパティは、隣接する表セルの境界線間のスペースを設定します。これは、display:table レイアウトと border-collapse: Separate を持つ親要素に適用する必要があります。

<br>HTML:<br><div><pre class="brush:php;toolbar:false"><div>
<p>&lt ;/div></p>
<p>CSS:<br>.table {</p>
<pre class="brush:php;toolbar:false">display: table;
border-collapse: separate;
border-spacing: 5px;

}
.row {

display: table-row;

}
.cell {

display: table-cell;
padding: 5px;
border: 1px solid black;

}
> ;

border-spacing は異なる値を設定する 2 つの値を受け入れることに注意してください必要に応じて、水平軸と垂直軸のマージン。