【CSS】tableの隙間を無くす方法

tableは初期状態だと隙間がある。その隙間を無くすサンプルコードはこちら。

tableに対して、border-collapse:collapseとborder-spacing:0を設定する。

table {
    border-collapse: collapse; /* セルの境界線を結合 */
    border-spacing: 0;         /* セル間のスペースを0に設定 */
}

隙間を消すとこんな感じ↓↓

ちなみにborder-collapseは２種類のプロパティを持ちます。

1. collapse（セル境界の結合）
2. separate（セル境界の分離）

セルの境界線を結合する場合は”collapse“、境界線を分離する場合は”separate“を設定すればOK。