border-collapse・border-spacingが効かない原因と解決方法

2021年11月12日

「border-spacingを指定しているのに隙間ができない!?」

「border-collapse:collapseを指定しているのに線が重ならない!?」

そんなborder-collapse・border-spacingが効かない原因と解決方法について解説します。

border-collapseとは
border-collapseが効かない原因
- tableに指定されていない
  - 【解決方法】tableに指定
border-spacingとは
border-spacingが効かない原因
- border-collapse:collapseが指定されている
  - 【解決方法】collapseの指定を消すかseparateで上書き
- tableに指定されていない
  - 【解決方法】tableに指定
まとめ

border-collapseとは

「border-collapse」はtable内のセルの境界を分けるか共有するか指定するCSSです。

border-collapse:separateだと分かれます。こちらが初期値です。

border-collapse:collapseだと共有します。

border-collapse:separate

セル	セル
セル	セル

<style>
.example{
    border-collapse:separate;
}
.example,.example td{
    border: 1px solid #333;
}
</style>
<table class="example">
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
</table>

border-collapse:collapse

セル	セル
セル	セル

<style>
.example2{
    border-collapse:collapse;
}
.example2,.example2 td{
    border: 1px solid #333;
}
</style>
<table class="example2">
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
</table>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

border-collapseが効かない原因

tableに指定されていない

境界の線を共有するために「border-collapse: collapse」をdivやliに使っていませんか？

「border-collapse」はtableにしか使えません。

あとtdに指定しても効きません。

【解決方法】tableに指定

border-collapseはtableに指定しましょう。

どうしてもdivやliに指定する場合はdisplay:tableやtable-cellなどを使い、しっかりtableの形にしましょう。

線の重なりが気になるなら下記の方法を参考にしてみてください。

【CSS】tableなどのborderの重なりを消す(重ねる)方法

borderを指定してブロック要素やtableのtdが連続すると重なった部分だけ線が太くなる！borderの重なりを消す(重ねる)方法を紹介します。

この記事を読む

border-spacingとは

「border-spacing」はセル間の隙間の距離を指定するCSSです。

セル	セル
セル	セル

<style>
.example3{
    border-spacing: 15px;
}
.example3,.example3 td{
    border: 1px solid #333;
}
</style>
<table class="example3">
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
</table>

border-spacingが効かない原因

border-collapse:collapseが指定されている

「border-collapse:collapse」はセルの境界線を共有させるCSSです。これが指定されているとセル間の隙間がないため「border-spacing」を指定しようがありません。

border-spacingとborder-collapse: collapseを同時に指定した例

セル	セル
セル	セル

<style>
.example4{
    border-spacing: 15px;
    border-collapse: collapse;
}
.example4,.example4 td{
    border: 1px solid #333;
}
</style>
<table class="example4">
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
    <tr>
        <td>セル</td><td>セル</td>
    </tr>
</table>