empty-cells

empty-cellsは、空白セルの枠線の表示非表示を指定するスタイルです。

解説

empty-cellsは空白のテーブルセルの枠線を表示するかしないかを指定します。
同時に border-collapse:collapse;が指定されている場合は、この指定は無効になります。
（border-collapse:collapseが指定されている場合は、空白セルの枠線の非表示はできません）

empty-cellsは trやtdタグではなく、tableタグに対して指定します。

構文

構文は以下になります。

値

empty-cellsには以下の値が指定できます。

太字の値は初期値です。

サンプル

空白セルは枠線を表示しない

table{
  border:1px solid black;
  border-collapse:separate;
  empty-cells:hide;
}
td{
  border:1px solid black;
}

<table>
  <tr><td>子</td><td></td><td>寅</td><td>卯</td></tr>
  <tr><td>辰</td><td>巳</td><td></td><td>未</td></tr>
  <tr><td>申</td><td>酉</td><td>戌</td><td></td></tr>
</table>

空白セルでも枠線を表示する

table{
  border:1px solid black;
  border-collapse:separate;
  empty-cells:show;
}
td{
  border:1px solid black;
}

<table>
  <tr><td>子</td><td></td><td>寅</td><td>卯</td></tr>
  <tr><td>辰</td><td>巳</td><td></td><td>未</td></tr>
  <tr><td>申</td><td>酉</td><td>戌</td><td></td></tr>
</table>

備考

• 空白セルでも枠線を表示させたい場合は、表示するがデフォルト値なのでempty-cells:showを指定しなくても構いません。

関連項目

• border-collapse：セルの枠線の重なりを指定する
• border-spacing：セルの枠線の間隔を指定する

Tweet