empty-cells 【セルのボーダーの間隔を指定する】

[Fx1] [Fx2] [Op6] [Op7] [Ns7]

empty-cellsプロパティは、空白セルのボーダーの表示、非表示を指定する際に使用します。border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。
Internet Explorerではサポートされていません。応急処置として、空白セルを表示させたい時は『改行禁止スペース( )』を入れるやり方があります。表示させたくない場合は、そのまま空にして下さい。

show
空白セルの場合にもボーダーを表示します。

hide
空白セルの場合にはボーダーを表示しません。

empty-cellsの使用例

CSSファイル

.sample001 {
 border-collapse: separate;
 border: 1px solid #cccccc;
 margin: 10px;
}
.sample001 td {
 border: 1px solid #0066ff;
}
td.show01 {
 empty-cells: show;
}
td.hide01 {
 empty-cells: hide;
}

HTMLソース

<table class="sample001">
<caption>empty-cells : show</caption>
<tr>
<td>empty-cells </td><td>show </td><td>空白セルのボーダー表示 </td></tr>
<tr>
<td>empty-cells </td><td>show </td><td>空白セルのボーダー表示 </td></tr>
<tr>
<td>empty-cells </td><td class="show01"></td><td class="show01"></td></tr>
</table>

<table class="sample001">
<caption>IE対策 改行禁止スペース(&nbsp;)挿入</caption>
<tr>
<td>empty-cells </td><td>無効 </td><td>空白セルのボーダー表示 </td></tr>
<tr>
<td>empty-cells </td><td>無効 </td><td>空白セルのボーダー表示 </td></tr>
<tr>
<td>empty-cells </td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<table class="sample001">
<caption>empty-cells : hide</caption>
<tr>
<td>empty-cells </td><td>hide </td><td>空白セルのボーダー非表示 </td></tr>
<tr>
<td>empty-cells </td><td>hide </td><td>空白セルのボーダー非表示 </td></tr>
<tr>
<td>empty-cells </td><td class="hide01"></td><td class="hide01"></td></tr>
</table>

<table class="sample001">
<caption>IE対策 空のまま記述なし</caption>
<tr>
<td>empty-cells </td><td>無効 </td><td>空白セルのボーダー非表示 </td></tr>
<tr>
<td>empty-cells </td><td>無効 </td><td>空白セルのボーダー非表示 </td></tr>
<tr>
<td>empty-cells </td><td></td><td></td></tr>
</table>

表示すると

empty-cells : show
empty-cells show 空白セルのボーダー表示 
empty-cells show 空白セルのボーダー表示 
empty-cells 
IE対策 改行禁止スペース(&nbsp;)挿入
empty-cells 無効 空白セルのボーダー表示 
empty-cells 無効 空白セルのボーダー表示 
empty-cells   
empty-cells : hide
empty-cells hide 空白セルのボーダー非表示 
empty-cells hide 空白セルのボーダー非表示 
empty-cells 
IE対策 空のまま記述なし
empty-cells 無効 空白セルのボーダー非表示 
empty-cells 無効 空白セルのボーダー非表示 
empty-cells 

テーブル(表)関連項目

table-layout テーブル(表)の表示方法を指定する 
caption-side テーブル(表)のキャプションの位置を指定する 
border-collapse セルのボーダーの表示の仕方を指定する 
border-spacing セルのボーダーの間隔を指定する 
empty-cells 空白セルのボーダーの表示・非表示を指定する 

戻る

TOP