項 目 | 説 明 |
---|---|
記述形式 | セレクタ {empty-cells: 値 } |
値 の形式 | show,hide | 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 プロパティ の規格です。
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> |
ブラウザー 表示例 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|