CSS3: empty-cells プロパティ - 空白セルの境界線の表示・非表示

■ 概要

項  目説  明
記述形式 セレクタ {empty-cells: }
値 の形式 showhide | inherit
初 期 値 show
対応ブラウザー C2+ / e8+ / N6+ / Fx1+ / Op4+ / Ch1+ / Sa1.2+
適用可能な要素 <th>要素<td>要素
継  承 する

■ 解説

empty-cells プロパティ は,テーブルの 空白セルの境界線の表示・非表示 を指定します。

指定できる値の形式は,以下のとおりです。

説  明
show 空白セルの境界線を表示します。 (初期値)
hide 空白セルの境界線を表示しません。
inherit 親要素の設定を継承します。

W3C での策定に関しては, このプロパティを対象とするはずの「CSS Tables Level 3 」ワーキンググループは現状では活動しておらず, まだ最初の草案も公開されていません。 ここに示した規格は CSS2.1「Tables」empty-cells プロパティ の規格です。

■ 使用例( empty-cells プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   table.sample {
      border: solid 2px #000000;
      border-collapse: separate;
      margin: 10px auto;
   }
   table.sample td{
      border: solid 2px blue;
      padding: 3px;
   }
   .ecell1 { empty-cells: inherit; }
   .ecell2 { empty-cells: show; }
   .ecell3 { empty-cells: hide; }
-->
</style>
HTML
<body> ~ </body>
<table class="sample ecell1">
   <tr><td>テキスト1</td><td></td></tr>
   <tr><td>テキスト2</td><td>テキスト3</td></tr>
</table>
<table class="sample ecell2">
   <tr><td>テキスト1</td><td></td></tr>
   <tr><td>テキスト2</td><td>テキスト3</td></tr>
</table>	
<table class="sample ecell3">
   <tr><td>テキスト1</td><td></td></tr>
   <tr><td>テキスト2</td><td>テキスト3</td></tr>
</table>

ブラウザー 表示例
テキスト1
テキスト2テキスト3
テキスト1
テキスト2テキスト3
テキスト1
テキスト2テキスト3

■ 備考

【参考ページ】