Properti empty-cells

Properti empty-cells memberi tahu browser cara menampilkan latar belakang dan border sel td atau sel th tabel HTML: ditampilkan atau tidak.

Sebuah sel dianggap kosong dalam kasus berikut: tidak ada karakter sama sekali, sel hanya berisi spasi (satu atau beberapa), baris baru atau karakter tab, atau jika properti visibility diatur ke hidden.

Untuk membuat sel tidak kosong, tetapi tanpa teks yang terlihat, digunakan trik berikut: masukkan spasi non-breaking   ke dalam sel.

Properti tidak berfungsi jika border-collapse diatur ke nilai collapse.

Sintaks

cssselektor {
  empty-cells: show | hide;
}

Nilai

Nilai default: show.

Contoh . Nilai show

Saat ini dalam tabel, beberapa sel kosong, tetapi mereka tetap memiliki border dan latar belakang:

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;
}

Результат:

Contoh . Nilai hide

Dan sekarang sel kosong tidak akan memiliki latar belakang dan border:

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;
}

Результат:

Lihat juga