ウェブランサー

empty-cells - 空白セルのボーダーの表示・非表示を指定する

対応ブラウザ
IE7非対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 th, td要素
継承 する

empty-cellsプロパティは、空白セルのボーダーの表示、非表示を指定する際に使用します。

Internet Explorerのバージョン7まではサポートされていません。応急処置として、空白セルを表示させたい時は「改行禁止スペース( )」を入れるやり方があります。表示させたくない場合は、そのまま空にして下さい。

empty-cellsに与えられる値

empty-cells: show;
空白セルの場合にもボーダーを表示します。
empty-cells: hide;
空白セルの場合にはボーダーを表示しません。

empty-cellsの使用サンプル

CSS
.table_sample {
 border-collapse: separate;
 border-spacing: 3px;
 border: 1px solid #FF9900;
 margin: 0px 0px 10px 0px;
}
.td_sample01 {
 empty-cells: show;
 border: 1px solid #999999;
}
.td_sample02 {
 empty-cells: hide;
 border: 1px solid #999999;
}
XHTML
<table class="table_sample">
<tr>
<td>empty-cells:show;</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>
<tr>
<td class="td_sample01">empty-cells:show;</td>
<td class="td_sample01"> </td>
<td class="td_sample01"></td>
</tr>
</table>

<table class="table_sample">
<tr>
<td>empty-cells:hide;</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>
<tr>
<td class="td_sample02">empty-cells:hide;</td>
<td class="td_sample02"> </td>
<td class="td_sample02"></td>
</tr>
</table>
表示確認
empty-cells:show; サンプル サンプル
empty-cells:show;
empty-cells:hide; サンプル サンプル
empty-cells:hide;

empty-cellsに関連するCSSプロパティ

テーブル(table)関連
border-collapse テーブルセルのボーダーの表示の仕方を指定する
border-spacing テーブルセルのボーダーの間隔を指定する
caption-side テーブル(表)のキャプションの位置を指定する
empty-cells 空白セルのボーダーの表示・非表示を指定する
table-layout テーブルを描画する際のレンダリングアルゴリズムを指定する