CSS - empty-cells

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

概要

属性名 empty-cells
show | hide
初期値show
適用可能要素テーブルセル要素
継承継承する
メディアVisual / Table?
サポートC2 / e8 / N6 / Fx1 / Ch1 / Op4 / Sa1.2

説明

テーブルのセルの中身が空のときに、そのセルを表示するか否かを指定します。初期値は、<!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-default td {
    empty-cells: inherit;
}
.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-2012 杜甫々
初版:1997年7月27日、最終更新:2012年4月30日
http://www.tohoho-web.com/css/prop/empty-cells.htm