empty-cells

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
empty-cellsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 4Safari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応