CSS – tableにはmarginが効かないようです

どうやら<table>を除いた<thead>, <tbody>, <tr>, <td>, <th>にはmarginプロパティは効かないみたいです。なので余白を作りたい場合paddingを使うと解決できそうです。

しかしpaddingを使っても<thead>, <tbody>, <tr>には余白は作れません。余白を作れるのはpaddingを使って<td>と<th>に指定した時だけみたいです。

また、そのほかにもborder-spacingを使って<tr>周りに余白を作ることもできるみたいなので使い勝手がいいプロパティを使うといいと思います。

paddingを使った使用例

paddingを使って余白を作りたい場合下記のように指定すること余白が作られます。

/* padding使用例 */

table thead tr th{
  padding: 20px;
}

table tbody tr td{
  padding: 20px;
}

trタグにはpaddingもmarginも効かない

trタグにはmargin / paddingの余白は効かないようです。もし余白を作りたいのであれば上記のようにthやtdタグに対してpaddingを使うといいと思います。

border-spacingを使った使用例

tableタグに対してborder-spacingを使うことでtrタグ周りの余白を作れます。例えば上下の幅を5pxにして左右の余白を10pxにしたい場合は下記のようなコードで適用されます。

table{
  border-collapse:separate;
  border-spacing:10px 5px;
}

border-collapse:separate;はデフォルトで設定されているため不要な場合は削除して大丈夫です。border-spacingだけで適用されなかったらborder-collapse: collapse;が適用されている場合があるので上記のコードで上書きしてあげれば解決できます。