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(枠線)がちゃんと表示されています。
ヘッダ | ヘッダ |
---|---|
データ | データ |
データ | データ |