【CSS/html】tableの隙間をなくしてborderをくっつける方法

【症状】下線がセルごとにわかれている

下記はtableのtdにborderを指定した例です。

セルごとのborderに隙間があり、線がわかれてしまっています。

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

これをtableの隙間をなくしてborderをくっつける方法を紹介します。

【方法1】tableにborder-spacing:0

tableにborder-spacing:0を指定すると線がくっつきます。

<style>
.example2{
    /*コレ*/border-spacing: 0;
}
.example2 td{
    border-bottom: 1px solid #333;
    padding: 5px;
}
</style>
<table class="example2">
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

border-spacingはセル同士の隙間の大きさを指定するCSSです。

border-spacingは指定しない場合、ブラウザ側で「border-spacing:2px」が指定されており、コレが隙間ができている原因です。

「border-spacing:0」と指定するとセル同士の隙間の大きさが0つまりなくなるため、線をくっつけることができます。

【方法2】tableにborder-collapse:collapse

tableにborder-collapse:collapseを指定すると線がくっつきます。

<style>
.example3{
    /*コレ*/border-collapse: collapse;
}
.example3 td{
    border-bottom: 1px solid #333;
    padding: 5px;
}
</style>
<table class="example3">
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

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

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

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

border-collapse:collapseで共有させることでセルの隙間がなくなり、線をくっつけることができます。

【まとめ】tableの隙間をなくしてborderをくっつける方法

下記のいずれか

• tableにborder-spacing:0
• tableにborder-collapse:collapse

以上、tableの隙間をなくしてborderをくっつける方法でした。