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