ホーム(記事一覧)へ

table,tr,tdにmarginが効かない原因と代替案

tableは表を表示するhtmlタグです。エクセル的な表として使ったり、横並べのために使ったり、要素をそろえるために使ったりと便利なhtmlタグです。

しかし「間隔を調整したいのにmarginが効かない!?」ということもあるでしょう。

table,tr,tdにmarginが効かない原因と代替案について解説します。

tableの基本

まずtableの基本をおさえましょう。

  • tableタグは表全体タグ
  • trタグは行を囲むタグ
  • td,thはマスのタグ

htmlソース

<table border="1">
    <tr>
        <td>左上</td><td>右上</td>
    </tr>
    <tr>
        <td>左下</td><td>右下</td>
    </tr>
</table>

ブラウザ上の表示結果

左上右上
左下右下

tableにmarginが効かないとき

table、つまり表全体の位置調整のためのmarginは効きます。

tableにmarginが効かない場合考えられるのは下記のとおりです。

親要素とtableの幅が同じ(tableの幅が100%)

marginは要素の外側の間隔を調整するCSSですが、そもそも外側にスペースがないと調整できません。

とくにtableは内容量によって自動で幅が変わるため、いつの間にか横幅がいっぱいになっていることがあるので注意です。

ちなみにtableはwidthを指定しなくてもmargin:autoで中央寄せできます。

その他ケアレスミスなど

上記に当てはまらないときケアレスミスなども考えられます。

下記を確認してみてください。

trとtdにはmarginが効かない

trとtdにはどうやってもmarginは効きません。そういう仕様です。

なお、trには基本的にCSSを指定しないことをオススメします。

代替案:border-spacingを使う

表のマスとマスの間隔を調整したいときはCSSのborder-spacingを指定しましょう。これはtableに対して指定します。

マス内、線と文字の間隔を調整したいときはtd,thにpaddingを指定しましょう。

CSS

table{
    border-spacing: 20px 10px;
}
td{
    padding: 10px 20px;
}

ブラウザ上の表示結果

左上右上
左下右下

まとめ

tableにmarginが効かないとき

親要素とtableの幅が同じ、つまり幅100%になっていてmarginを指定する隙間がないから。

trとtdにはmarginが効かない

マスとマスの間隔調整はtableにborder-spacingを指定する。

マス内の文字とマス枠の間隔調整にはtd,thにpaddingを指定する。

以上、table,tr,tdにmarginが効かない原因と代替案でした。

関連記事