CSS: table(テーブル)のボーダーの隙間をなくす設定

CSS で table(テーブル)の border(ボーダー・枠線)の隙間をなくすには、 border-collapse プロパティを使用します。

「border-colla;se: collapse;」とすることで、ボーダーの隙間がなくなり、 重ねて表示されます。

初期値は「separate」となっていますので、何も設定しない場合はボーダーが分離されます。


border-collapse: collapse; /* 重ねて表示    */
border-collapse: separate; /* 分離させて表示 初期値 */

初期値 border-collapse: separate;

初期値「separate」の場合は次のようにボーダーが分離されています。

データデータ
データデータ
データデータ

「border-collapse: collapse;」とした場合

「border-collapse: collapse;」とした場合は、次のように ボーダーの隙間がなくなり、重ねて表示されます。

データデータ
データデータ
データデータ

table {
    border-collapse: collapse;
}

HTML・CSS入門