【CSS】table の border (枠線)の太さを指定する

スポンサーリンク

CSS で table(テーブル)の border(ボーダー・枠線)の「太さ」を指定するには 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;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト