【CSS】table(テーブル)の下だけ、border(枠線)を引く

スポンサーリンク

CSS でtable(テーブル)全体や、th 要素、td 要素の下だけに、 border(枠線・ボーダー)を引く場合は、border-bottom プロパティを使用します。

top(上)、rifht(右)、left(左)は表示せずに、bottom(下)だけを指定します。

使用例


table, td, th {
    border-bottom: 1px solid black;
}

環境によっては CSS のデフォルト設定で、テーブルに対して枠線を引く設定になっていることも あります。その場合は「border: none」で一旦非表示にしてから、 あらためて「border-bottom」を指定します。

table, td, th {
    border: none;
    border-bottom: 1px solid black;
}

下だけに枠線を引くサンプル

下のテーブルは、table 要素、th 要素、td 要素それぞれに 「border-bottom: 1px solid black;」を指定し、 td 要素間の枠線の隙間を無くすために「border-collapse: collapse;」 を指定しています。

ヘッダヘッダ
データデータ
データデータ

table, td, th {
    border-bottom: 1px solid black;
}
table {
    border-collapse: collapse;
}

th 要素とtable 全体の下だけに枠線を引くサンプル

下のテーブルは、th 要素(ヘッダ)と table 全体の下だけに枠線を引いています。 今回は table 要素と th 要素に対して「border-bottom: 1px solid black;」 を指定しています。td 要素に対しては指定していません。
ヘッダヘッダ
データデータ
データデータ

table, th {
    border-bottom: 1px solid black;
}
table {
    border-collapse: collapse;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト