empty-cells/空セル罫線非表示

説明

　表(テーブル)はデフォルトではセルにデータがなくても罫線が引かれますが、empty-cellsを使うと罫線を表示しないように設定出来ます。

　空セルの周りの罫線を非表示にするため、border-collapseでデフォルトのseparateが指定されている必要があります。collapseが指定されているとempty-cellsは有効になりません。

　又、IE7等の古いブラウザでは空のセルの罫線が指定しなくても表示されていません。

構文

　empty-cellsプロパティの構文は以下の通りです。

empty-cells: 表示・非表示;

　表示・非表示では、showがデフォルトで表示、hideを指定すると非表示になります。

利用例

　empty-cellsの利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

table {
empty-cells: hide;
}

<table border=1>
<tr>
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td></td>
</tr>
</table>

　右下のセルには内側の罫線が表示されていません。

　empty-cellsでデフォルトのshowの場合は以下のように表示されます。

　右下のセルはデータがありませんが、内側の罫線は表示されています。

　尚、確認した範囲ではFireFoxはバージョンに寄るかもしれませんが、デフォルトがhideのようで、空セルの表示・非表示が重要な場合は明確に指定した方が良さそうです。

関連ページ

・ホームページ作成「表の挿入」

　表の表示方法だけでなく、罫線の表示、罫線を1重線にする方法、罫線の太さと色を変える方法、幅の指定、センタリング、の背景と文字の色を変える方法、セルの結合等について説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る