empty-cellsプロパティ

最終更新日：2023-11-02
公開日：2016-09-04

empty-cellsプロパティは内容を持たないセルの表示方法を指定するプロパティです。

初期値

show
継承

継承あり
適用できる要素

テーブルセル要素

empty-cellsプロパティに指定できる値

empty-cellsプロパティは次の値を指定することができます。

値	内容
`show`	初期値。空のセルを表示。
`hide`	空のセルを非表示。
`inherit`	親要素の設定を継承。

以降はempty-cellsプロパティを使用するコード例とブラウザでの表示例になります。

使用例1: show

empty-cellsプロパティの値に「show」(初期値)を指定している例です。
内容が空のセルも表示されます。

CSS コード例

.table1 {
  empty-cells: show;
}

HTML コード例

<table class="table1">
  <tr>
    <th class="product_name">商品名</th>
    <th class="product_num">在庫数</th>
    <th class="product_price">価格</th>
  </tr>
  <tr>
    <td>ミネラルウォーター</td>
    <td>150本</td>
    <td>100円（税抜）</td>
  </tr>
  <tr>
    <td>コーラ</td>
    <td>100本</td>
    <td>140円（税抜）</td>
  </tr>
  <tr>
    <td>お茶</td>
    <td>200本</td>
    <td>130円（税抜）</td>
  </tr>
  <tr>
    <td>レモンティー</td>
    <td></td>
    <td></td>
  </tr>
</table>

使用例2: hide

empty-cellsプロパティの値に「hide」を指定している例です。

CSS コード例

.table2 {
  empty-cells: hide;
}

HTML コード例

<table class="table2">
  <tr>
    <th class="product_name">商品名</th>
    <th class="product_num">在庫数</th>
    <th class="product_price">価格</th>
  </tr>
  <tr>
    <td>ミネラルウォーター</td>
    <td>150本</td>
    <td>100円（税抜）</td>
  </tr>
  <tr>
    <td>コーラ</td>
    <td>100本</td>
    <td>140円（税抜）</td>
  </tr>
  <tr>
    <td>お茶</td>
    <td>200本</td>
    <td>130円（税抜）</td>
  </tr>
  <tr>
    <td>レモンティー</td>
    <td></td>
    <td></td>
  </tr>
</table>

記事一覧