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 July 2015.

empty-cells は CSS のプロパティで、のセルが目に見える内容を持たない場合に、周囲の境界と背景をユーザーエージェントがどのように描画するかを指定します。

試してみましょう

このプロパティは、 border-collapse プロパティが separate であった場合のみ効果があります。

構文

css
/* キーワード値 */
empty-cells: show;
empty-cells: hide;

/* グローバル値 */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;

empty-cells プロパティは、以下のキーワード値のうちの一つで指定します。

show

通常のセルのように、境界や背景を描くことを示すキーワードです。

hide

境界や背景を描かないことを示すキーワードです。

公式定義

初期値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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
empty-cells

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報