【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;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト