CSS: table の border (枠線)の太さを指定する
CSS で table(テーブル)の border(ボーダー・枠線)の「太さ」を指定するには border プロパティ、又は border-width プロパティを使用します。
border プロパティは「太さ」の他に、「スタイル」や「色」も指定できます。 border-width プロパティは「太さ」だけを指定したい場合に使用します。
border、border-width 使用例
太さを 1px にしたい場合は次のように指定します。
/* 1px 実線 黒色 */ border: 1px solid black; /* 太さだけを指定 */ border-width: 1px;
table の border の太さを指定するサンプルコード
border-collapse プロパティの値が 「separete(分離)」の場合と、 「collapse(重ねて表示)」の場合に分けて表示します。
border-collapse: separate;(分離)の場合
外側の border(枠線)を 2px、内側の border(枠線)を 1px に設定すると 次のように表示されます。
CSS のセレクタは、外側の border が table 要素、内側の border が td 要素です。
データ | データ |
データ | データ |
データ | データ |
table {
border-collapse: separate;
border: 2px solid black;
}
td {
border: 1px solid black;
}
border-collapse: collapse;(重ねて表示)の場合
下のテーブルは、border(枠線)の太さを 1px に指定しています。 border を重ねて表示するので、太さの指定は td 要素に対して指定します。
データ | データ |
データ | データ |
データ | データ |
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}