Propriedade empty-cells

A propriedade empty-cells especifica ao navegador como exibir o plano de fundo e a borda de células td ou células th HTML tabelas vazias: mostrar ou não.

Uma célula é considerada vazia nos seguintes casos: não há nenhum caractere, a célula contém apenas espaço (um ou mais), quebra de linha ou caractere de tabulação, ou se a propriedade visibility estiver definida como hidden.

Para tornar uma célula não vazia, mas sem texto visível, utiliza-se o seguinte método: na célula é inserido um espaço inseparável  .

A propriedade não funciona se border-collapse estiver definido com o valor collapse.

Sintaxe

cssseletor {
  empty-cells: show | hide;
}

Valores

Valor padrão: show.

Exemplo . Valor show

Agora na tabela algumas células estão vazias, mas mesmo assim possuem borda e plano de fundo:

html<table>
  <tr>
    <td>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

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

Результат:

Exemplo . Valor hide

E agora as células vazias não terão plano de fundo e borda:

html<table>
  <tr>
    <td>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

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

Результат:

Veja também