CSS - empty-cells

概要

属性名	empty-cells
値	show \| hide
初期値	show
適用可能要素	テーブルセル要素
継承	継承する
メディア	visual

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS2	8	1	1	4	1.2

説明

テーブルのセルの中身が空、または不可視文字(スペース(U+0020)、改行(U+000D)、復帰(U+000A)、タブ(U+0009)、スペース(U+0020))以外の文字を含まない場合に、そのセルを表示するか否かを指定します。初期値は、<!DOCTYPE html> を指定した標準モードでは、どのブラウザでも show となりますが、非標準モードでの初期値はブラウザやバージョンによって異なります。

値	説明
show	表示します。
hide	表示しません。

使用例

CSS

.sample table {
  border: 1px solid gray;
  margin: 1em;
}
.sample caption {
  font-weight: bold;
}
.sample td {
  border: 1px solid gray;
  background-color: #cc9999;
}
.sample-show td {
  empty-cells: show;
}
.sample-hide td {
  empty-cells: hide;
}

HTML

<div class="sample">
  <table class="sample-default">
    <caption>default</caption>
    <tr><td>AAA</td><td></td></tr>
    <tr><td>AAA</td><td>AAA</td></tr>
  </table>
  <table class="sample-show">
    <caption>show</caption>
    <tr><td>AAA</td><td></td></tr>
    <tr><td>AAA</td><td>AAA</td></tr>
  </table>
  <table class="sample-hide">
    <caption>hide</caption>
    <tr><td>AAA</td><td></td></tr>
    <tr><td>AAA</td><td>AAA</td></tr>
  </table>
</div>

表示

default
AAA
AAA	AAA

show
AAA
AAA	AAA

hide
AAA
AAA	AAA

リンク

初版：1997年7月27日、最終更新：2018年5月31日

https://www.tohoho-web.com/css/prop/empty-cells.htm