【CSS】table(テーブル) のborder(枠線)を消す方法

スポンサーリンク

CSS で table(テーブル) の border(枠線・ボーダー)を消すには 、border プロパティの 値を「none」に設定します。

border: none;
次のような枠線が全て表示されているテーブルがあるとします。
データデータ
データデータ
データデータ

枠線を全て消す

テーブルの枠線を全て消すには、table 要素、th 要素、td 要素に対して 「border: none;」を設定します。


table, th, td {
    border: none;
}

表示結果: 枠線が全て消えています。

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

内側の枠線を消して、外側の枠線のみを残す

内側の枠線を消して、外側の枠線のみを残す場合は、 table の border プロパティを指定し、 th 要素、td 要素に対して「border: none;」を設定します。


table {
    border: 1px solid black;
}
td {
    border: none;
}

表示結果: 内側の枠線が全て消えて、外側の枠線のみ表示されています。

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

特定(一部)の td 要素の枠線を消す場合

特定(一部)の td 要素の枠線を消す場合は、 まずHTML 側で、枠線を消したい td 要素にクラスを設定します。 下の例では「class="none"」を設定しています。


<td class="none">データ</td>

次にCSS 側で、下のようにクラス名 none のある td 要素に対して「border: none」を設定します。


td.none {
    border: none;
}

下のテーブルでは、右下の td 要素の枠線を非表示にしています。

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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト