Proprietà empty-cells

La proprietà empty-cells indica al browser come visualizzare lo sfondo e il bordo delle celle td o celle th HTML tabella vuote: mostrarli o meno.

Una cella è considerata vuota nei seguenti casi: non ci sono caratteri di alcun tipo, la cella contiene solo spazi (uno o più), caratteri di a capo o di tabulazione, oppure se la proprietà visibility è impostata su hidden.

Per rendere una cella non vuota, ma allo stesso tempo senza testo visibile, si utilizza il seguente espediente: nella cella si inserisce una spazio unificatore  .

La proprietà non funziona se è impostata la proprietà border-collapse con il valore collapse.

Sintassi

cssselettore {
  empty-cells: show | hide;
}

Valori

Valore predefinito: show.

Esempio . Valore show

Attualmente nella tabella alcune celle sono vuote, ma hanno comunque bordo e sfondo:

html<table>
  <tr>
    <td>cella</td>
    <td></td>
    <td>cella</td>
  </tr>
  <tr>
    <td></td>
    <td>cella</td>
    <td></td>
  </tr>
  <tr>
    <td>cella</td>
    <td>cella</td>
    <td>cella</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: show;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Esempio . Valore hide

Ora invece le celle vuote non avranno sfondo e bordo:

html<table>
  <tr>
    <td>cella</td>
    <td></td>
    <td>cella</td>
  </tr>
  <tr>
    <td></td>
    <td>cella</td>
    <td></td>
  </tr>
  <tr>
    <td>cella</td>
    <td>cella</td>
    <td>cella</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Vedi anche