Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

empty-cells

テーブルセル要素に目に見える内容が含まれていなかった場合の表示方法を指定します。

サンプルコード

table.test { empty-cells: show;}
table.test1 tr td { empty-cells: hide;}

指定可能な値一覧

値	概要
show	この値が指定されているテーブルセル要素は目に見える内容を含んでいなかった場合でもボーダー(境界線)や背景を表示します。この『show』が初期値です。
hide	この値が指定されているテーブルセル要素は目に見える内容を含んでいなかった場合、ボーダー(境界線)や背景を表示しません。

ブラウザでの表示結果

<table style="border: solid 1px red; empty-cells: show;">
	<tr><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。下のtd要素は空です。</td><td style="border: solid 1px blue; background-color: yellow;"></td></tr>
	<tr><td style="border: solid 1px blue; background-color: yellow;"></td><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。上のtd要素は空です。</td></tr>
</table>

<table style="border: solid 1px red; empty-cells: hide;">
	<tr><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。下のtd要素は空です。</td><td style="border: solid 1px blue; background-color: yellow;"></td></tr>
	<tr><td style="border: solid 1px blue; background-color: yellow;"></td><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。上のtd要素は空です。</td></tr>
</table>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

テーブルセル要素に目に見える内容が含まれていなかった場合の表示方法を指定します。値に『show』と指定すると目に見える内容が含まれていなかった場合でもボーダーと背景は表示され、値に『hide』と指定すると目に見える内容が含まれていなかった場合はボーダーと背景は非表示となります。

非表示となっている場合は、あくまでも境界線と背景が非表示になっているだけなので、そのテーブルセル要素は存在していないものとして扱われるというわけではありません。『opacity』プロパティに『0』、『visibility』プロパティに『hidden』と指定した場合と同じです。ご注意ください。

このプロパティが指定できるのはテーブルセル要素のみとなります。尚、この『empty-cells』プロパティは親要素から値を継承しますので、親のtable要素やtr要素などに『empty-cells』プロパティを指定するといった実装方法も可能です。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル