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

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

構文

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

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

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

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

show | hide

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

.table_1 {
  empty-cells: show;
}

.table_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}

結果

仕様書

仕様書 状態 備考
CSS Level 2 (Revision 1)
empty-cells の定義
勧告  

初期値show
適用対象テーブルセル要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
empty-cellsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 4Safari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: mdnwebdocs-bot,