【CSS】table の border(枠線)が表示されない場合

スポンサーリンク

table(テーブル)の border(枠線・ボーダー)が表示されない場合は、 border プロパティを設定しているかを確認してください。

table 要素、th 要素、td 要素を記述しただけでは、テーブルの枠線は表示されません。 CSS 側で border プロパティを設定する必要があります。

border プロパティ設定例


table, td, th{
    border: 1px solid black;
}

サンプルコード

下の テーブル用 HTMLを、CSS 側で何も設定せずに表示させてみます。


<table>
    <tr><th>ヘッダ</th><th>ヘッダ</th></tr>
    <tr><td>データ</td><td>データ</td></tr>
    <tr><td>データ</td><td>データ</td></tr>
</table>

表示結果:下のようにデーターが表示されるだけで、border(枠線)は何も表示されません。

ヘッダヘッダ
データデータ
データデータ

では次に、CSS で border プロパティを設定します。 table 要素、th 要素、td 要素に対して border プロパティを設定します。


table, td, th{
    border: 1px solid black;
}

表示結果:border(枠線)がちゃんと表示されています。

ヘッダヘッダ
データデータ
データデータ

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト