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

empty-cellsプロパティでは、空白セル(空セル)のボーダーと背景を表示させるかどうかを指定することができます。 またempty-cellsはborder-collapseの値が「separate」の場合に適用されます。

なお、ここでいう「空白セル」とは、テーブル(表)のデータが入っていないセル(要素内容が空のセル)だけでなく、visibilityプロパティの値に「hidden」が指定されているセルも含みます。

empty-cellsの初期値はshow(空白セルのボーダーを表示)となっていますので、空白セルを非表示にしたい場合は値にhideを指定して下さい。

書式

  • empty-cells : ……… 空白セルのボーダーの表示・非表示

★:show、hide、inherit

show
空白セルのボーダー(枠線)と背景を表示する(初期値)
hide
空白セルのボーダー(枠線)と背景を表示しない

使用した時の例

table {border: solid 1px #ccc; border-collapse: separate;}

.sample1 {empty-cells: show; border-color: red;}
.sample2 {empty-cells: hide; border-color: red;}
<table>
  <tr>
     <th>名前</th>
     <th>説明</th>
     <th>特徴</th>
  </tr>
  <tr>
     <td>フジリンゴ</td>
     <td class="sample1"></td>
     <td>甘みと酸味のバランスが抜群!さっぱりとした食感</td>
  </tr>
  <tr>
     <td>スリムレッド</td>
     <td class="sample2"></td>
     <td>香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない</td>
  </tr>
</table>

ブラウザ上の表示例

名前 説明 特徴
フジリンゴ 甘みと酸味のバランスが抜群!さっぱりとした食感
スリムレッド 香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない

対応ブラウザなどのデータ

初期値 show 値の継承 継承する
適用可能な要素 セル要素(th,td / table要素に対して指定した場合、その内容であるセルに継承する)
メディア visual
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1.2~

関連情報