2022-08-12

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