empty-cellsプロパティ

TOPページに戻る > CSS

empty-cellsプロパティ

内容がないセルの背景と枠線を表示、非表示にすることができます
border-collapseプロパティの値がseparateになっていないと、empty-cellsプロパティが使えません
値にhideを指定すると、枠線と背景が非表示になります
値にshowを指定すると、枠線と背景が表示されます
初期値はshowです
※IE6、IE7が未対応、IE8から対応しています

使い方（書式）

セレクタ { empty-cells: 値; }                                    

empty-cellsプロパティ

対応ブラウザ
適用できる要素	td要素 th要素　displayプロパティの値にtable-cellを指定した要素
子要素へのスタイルの継承	する

プロパティの値	説明
show	内容がないセルの枠線と背景が表示されます
hide	内容がないセルの枠線と背景が非表示になります

実際の指定方法

.hoge { empty-cells: show; }   /* 内容がないセルの枠線と背景が表示 */

.hoge2 { empty-cells: hide; }  /* 内容がないセルの枠線と背景が非表示 */

html部分

<table class="hoge">
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td></td>
</tr>
</table>
<p class="tya">実際の表示　値がhide</p>
<br>
<table class="hoge2">
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td></td>
</tr>
</table>

実際の表示　値がshow

セル	セル
セル

実際の表示　値がhide

セル	セル
セル