ホームへ

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

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

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

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

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>

border-collapseが効かない原因

tableに指定されていない

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

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

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

【解決方法】tableに指定

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

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

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

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>

【解決方法】collapseの指定を消すかseparateで上書き

「border-collapse: separate」はセル同士を分けるCSSです。

separateは初期値ですので、border-collapse: collapseの指定を消すか、border-collapse: separateで上書きしましょう。

tableに指定されていない

「border-spacing」はtableに指定するCSSです。tdに指定しても効きません。

【解決方法】tableに指定

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

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

まとめ

border-spacingが効かない原因

border-collapse:collapseが指定されていると効きません。

collapseの指定を消すかseparateで上書きしましょう。

border-spacing・border-collapseが効かない原因

divやtdには効きません。tableに指定しましょう。

以上、border-collapse・border-spacingが効かない原因と解決方法でした。

マンガで読める関連記事