| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {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> |
| ブラウザー 表示例 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|