empty-cells

CSSでは、表のデータがないセルにおいて、罫線(枠線)や背景を表示しないようにできます。

本ページでは、empty-cellsプロパティについて説明します。

empty-cellsプロパティとは

empty-cellsプロパティは、データがないセルの罫線や背景を非表示にできます。

データがないセルは、枠線や背景が表示されていません。

empty-cellsの定義は、以下のとおりです。

【empty-cellsの定義】
show | hide | inherit
初期値 show
適用対象 tableセル要素
継承 する

値の説明

以下は、empty-cellsで使える値と説明です。

show
データがないセルでも、枠線や背景などを表示します。
hide
データがないセルは、枠線や背景などを表示しません。

利用例

利用例を示すために、以下のHTMLを使います。

【empty-cellsの利用例を示すためのHTML】
<table class="test">
<tr>
<th></th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td></td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td></td>
</tr>
</table>

上記に、CSSで枠や色を付けると、以下のように表示されます。

1行目のヘッダーが3列、2行目と3行目のデータが3列の表があります。データがないセルも罫線と背景色が表示されています。

データがないセルでも、枠線や背景色が表示されています。これが、empty-cellsのデフォルトです。

CSSに、以下を追加します。

【hideの利用例】
.test {
  empty-cells: hide;
}

上記により、以下のように表示されます。

1行目のヘッダーが3列、2行目と3行目のデータが3列の表があります。データがないセルは、罫線と背景色が表示されていません。

データがないセルは、罫線と背景色が表示されていません。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
empty-cells
【スマートフォン】
項目 Sa An Op Ch Fx Sm
empty-cells
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「HTMLに表を挿入して装飾する

CSSプロパティ一覧」に戻る