コピペでOK!「tableタグ」の隙間をリセットするCSS

コピペでOK!「tableタグ」の隙間をリセットするCSS
スポンサーリンク

焼いたかぼちゃが好きな四条せつなです。

Web制作で「tableタグ」を使うことが、多々あると思います。よく使っている人なら分かると思うのですが、この「tableタグ」…デフォルトで”隙間”が空いてしまうんですよね。ほんの僅かな隙間ですが、気になってしまいます。

四条ねこ
この「tableタグ」の”隙間”は、CSSリセットで解決するので、その方法を紹介するよ!

コピペで「tableタグ」のリセットをできるようにコードを貼っておきますね。補足説明も少しします!

テーブルのセルの隙間をリセットするCSS

デフォルトで「tableタグ」を使うと、どうやら少しだけセルとセルの間に隙間ができちゃうようです。なので、その「tableタグ」の隙間をリセットするコードを、忘備録として残しておきます。

上のコードをCSSにコピペしてくれればOKですっ!

各CSSコードの解説

せっかくですので、今回使用したCSSのコードを解説したいと思います。

border-collapseとは

上記コードの2行目の「border-collapse: collapse;」は、「隣接するセルのボーダーを重ねる」という意味です。

四条ねこ

border-collapseでは、

  • collapse:隣接するボーダーを重ねる。
  • separate:隣接するボーダーの間隔を空ける。

の2つのプロパティがあるよ!

border-spacingとは

上記コードの3行目の「border-spacing: 0;」は、「隣接するボーダーとボーダーの間隔をナシにする」という意味です。

四条ねこ
border-spacingプロパティでは、数値でそのボーダーとボーダーの間隔を指定できるよ!数値は、「px」でも「em」でも”単位”を用いればOK!

せつなのまとめ

HTML・CSSには、このようなデフォルトで”隙間”が生じてしまうことがあります。その1つが、この「tableタグ」の隙間になる訳ですね。今回紹介したCSSで、サクッとリセットしちゃいましょう。

四条ねこ

つまりは…

  • 「tableタグ」は、デフォルトで隙間ができる。
  • 隙間は、CSSで簡単にリセットできる。

って、ことですね!

ということで、“コピペでOK!「tableタグ」の隙間をリセットするCSS”でした!でわでわっ!

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です