CSS - empty-cells

トップ > CSSリファレンス > empty-cells

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS281141.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
AAAAAA
show
AAA
AAAAAA
hide
AAA
AAAAAA

リンク


Copyright (C) 1997-2018 杜甫々
初版:1997年7月27日、最終更新:2018年5月31日
http://www.tohoho-web.com/css/prop/empty-cells.htm