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

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

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

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

HTML・CSS入門