empty-cells
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
empty-cells は CSS のプロパティで、表のセルが目に見えるコンテンツを持たない場合に、周囲の境界と背景を描画するかどうかを指定します。
試してみましょう
empty-cells: show; empty-cells: hide; <section class="default-example" id="default-example"> <table class="transition-all" id="example-element"> <tr> <th>顧客名</th> <th>年齢</th> </tr> <tr> <td></td> <td>25</td> </tr> <tr> <td>Louise Q.</td> <td></td> </tr> <tr> <td>Owen B.</td> <td></td> </tr> <tr> <td>Stan L.</td> <td>71</td> </tr> </table> </section> th, td { border: 2px solid #a19; padding: 0.25rem 0.5rem; } このプロパティは、 border-collapse プロパティが separate であった場合のみ効果があります。
構文
css
/* キーワード値 */ empty-cells: show; empty-cells: hide; /* グローバル値 */ empty-cells: inherit; empty-cells: initial; empty-cells: revert; empty-cells: revert-layer; empty-cells: unset; empty-cells プロパティは、以下のキーワード値のうちの一つで指定します。
値
公式定義
| 初期値 | show |
|---|---|
| 適用対象 | 表のセル要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
empty-cells =
show |
hide
例
表の空のセルの表示・非表示
HTML
html
<table class="table_1"> <tr> <td>Moe</td> <td>Larry</td> </tr> <tr> <td>Curly</td> <td></td> </tr> </table> <br /> <table class="table_2"> <tr> <td>Moe</td> <td>Larry</td> </tr> <tr> <td>Curly</td> <td></td> </tr> </table> CSS
css
.table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td, th { border: 1px solid gray; padding: 0.5rem; } 結果
仕様書
| Specification |
|---|
| Cascading Style Sheets Level 2 # empty-cells |