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対策 改行禁止スペース( )挿入</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>
<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 |
| empty-cells | 無効 | 空白セルのボーダー表示 |
| empty-cells | 無効 | 空白セルのボーダー表示 |
| empty-cells |
| empty-cells | hide | 空白セルのボーダー非表示 |
| empty-cells | hide | 空白セルのボーダー非表示 |
| empty-cells |
| empty-cells | 無効 | 空白セルのボーダー非表示 |
| empty-cells | 無効 | 空白セルのボーダー非表示 |
| empty-cells |
テーブル(表)関連項目
| table-layout | テーブル(表)の表示方法を指定する |
| caption-side | テーブル(表)のキャプションの位置を指定する |
| border-collapse | セルのボーダーの表示の仕方を指定する |
| border-spacing | セルのボーダーの間隔を指定する |
| empty-cells | 空白セルのボーダーの表示・非表示を指定する |
