Proprietà CSS empty-cells

La proprietà empty-cells controlla se i bordi e lo sfondo vengono disegnati sulle celle vuote di una tabella. Una cella vuota è un elemento <td> o <th> privo di qualsiasi contenuto. Una cella che contiene solo spazi bianchi (uno spazio, un  , o un'interruzione di riga) è comunque considerata non vuota, quindi la proprietà non ha effetto su di essa.

Questa pagina spiega cosa fa empty-cells, quando ha effetto, i valori che accetta e le insidie da tenere a mente.

Quando si applica la proprietà

empty-cells ha un effetto visibile solo quando i bordi delle celle sono separati, ovvero quando la tabella utilizza border-collapse: separate (il valore predefinito). Con border-collapse: collapse, le celle adiacenti condividono un unico bordo, quindi non esiste un bordo o uno sfondo separato per una cella vuota da nascondere, e la proprietà viene ignorata.

Poiché i valori predefiniti sono già border-collapse: separate e empty-cells: show, le celle vuote vengono mostrate per impostazione predefinita e questa proprietà è necessaria solo per nasconderle.

Valore iniziale	show
Si applica a	elementi table-cell
Ereditata	No.
Animabile	No
Versione	CSS2
Sintassi DOM	object.style.emptyCells = "hide";

Sintassi

Sintassi della proprietà CSS empty-cells

empty-cells: show | hide | initial | inherit;

Esempio della proprietà empty-cells:

Esempio della proprietà CSS empty-cells con i valori show e hide

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      td,
      th {
        border: 1px solid #1c87c9;
        padding: 0.5rem;
      }
      table {
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Empty-cells property example</h2>
    <p>Here the "show" value is used: </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br />
    <p>In this table the "hide" value is used:</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Provalo tu stesso »

Nella prima tabella la cella in basso a destra, vuota, mantiene il suo bordo. Nella seconda, empty-cells: hide rimuove completamente il bordo e lo sfondo di quella cella, facendola apparire come uno spazio vuoto. Usa hide quando una tabella può contenere spazi non riempiti e si desidera un aspetto più pulito — ad esempio, un calendario o una griglia di prezzi in cui non tutti gli slot sono occupati.

Esempio con uno sfondo colorato:

Esempio della proprietà CSS empty-cells con i valori hide e show

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      body {
        background: #1c87c9;
        padding: 25px 0;
        color: #fff;
        font-size: 2em;
        text-align: center;
      }
      table {
        border-collapse: separate;
      }
      td {
        background: #fff;
        border: 1px solid #8ebf42;
        padding: 10px 15px;
        color: green;
      }
    </style>
  </head>
  <body>
    <p>The empty cells are shown</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>The empty cells are hidden</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Provalo tu stesso »

Quando si applica hide, la cella vuota non mostra né il suo sfondo bianco né il bordo verde — si fonde con lo sfondo blu della pagina.

Risultato

Valori

Valore	Descrizione	Prova
show	I bordi e lo sfondo delle celle vuote vengono disegnati. Questo è il valore predefinito.	Prova »
hide	I bordi e lo sfondo delle celle vuote non vengono disegnati, quindi le celle vuote appaiono come spazi bianchi.	Prova »
initial	Reimposta la proprietà al suo valore predefinito (`show`).	Prova »
inherit	Eredita il valore dall'elemento padre. Nota che `empty-cells` non viene ereditata per impostazione predefinita.

Supporto nei browser

empty-cells fa parte di CSS2 ed è supportata in tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e Opera. Non sono richiesti prefissi vendor.

Note e avvertenze

La proprietà non viene ereditata. Impostala su table, tr, td o th che desideri influenzare (si applica visivamente tramite cascata perché le celle la leggono dal proprio stile calcolato — dichiararla sulla table è l'approccio più comune).
Non ha effetto con border-collapse: collapse, perché i bordi compressi sono condivisi tra le celle.
Una cella con spazi bianchi, un  , o un <img>/elemento vuoto non è considerata vuota da questa proprietà. Solo una cella priva letteralmente di contenuto viene influenzata.
Per controllare lo spazio tra le celle separate, combinala con border-spacing.

Esercizio

Pratica

Qual è la funzione della proprietà 'empty-cells' in CSS?

Imposta se i bordi e lo sfondo vengono applicati alle celle vuote nelle tabelle.Imposta il colore delle celle vuote nelle tabelle.Definisce lo spazio tra le celle nelle tabelle.Viene utilizzata per nascondere le celle vuote nelle tabelle.