თვისება empty-cells

თვისება empty-cells განსაზღვრავს ბრაუზერისთვის, როგორ აჩვენოს ცარიელი უჯრების td ან უჯრების th HTML ცხრილის ფონი და საზღვარი: გამოჩნდეს თუ არა.

უჯრა ცარიელად ითვლება შემდეგ შემთხვევებში: არ არის არცერთი სიმბოლო, უჯრაში შეიცავს მხოლოდ სივრცეს (ერთი ან მეტი), ხაზის გამოტოვებას ან ტაბულაციის სიმბოლოს, ან თუ თვისება visibility დაყენებულია როგორც hidden.

უჯრის არაცარიელად გამოსაჩენად, მაგრამ ამასთანავე ხილული ტექსტის გარეშე, გამოიყენება შემდეგი მეთოდი: უჯრაში იწერება განუყოფელი სივრცე  .

თვისება არ მუშაობს, თუ დაყენებულია border-collapse მნიშვნელობაზე collapse.

სინტაქსი

cssსელექტორი {
  empty-cells: show | hide;
}

მნიშვნელობები

საწყისი მნიშვნელობა: show.

მაგალითი . მნიშვნელობა show

ამჟამად ცხრილში ზოგიერთი უჯრა ცარიელია, მაგრამ მაინც აქვთ საზღვარი და ფონი:

html<table>
  <tr>
    <td>უჯრა</td>
    <td></td>
    <td>უჯრა</td>
  </tr>
  <tr>
    <td></td>
    <td>უჯრა</td>
    <td></td>
  </tr>
  <tr>
    <td>უჯრა</td>
    <td>უჯრა</td>
    <td>უჯრა</td>
  </tr>
</table>

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

Результат:

მაგალითი . მნიშვნელობა hide

ახლა კი ცარიელ უჯრებს არ ექნებათ ფონი და საზღვარი:

html<table>
  <tr>
    <td>უჯრა</td>
    <td></td>
    <td>უჯრა</td>
  </tr>
  <tr>
    <td></td>
    <td>უჯრა</td>
    <td></td>
  </tr>
  <tr>
    <td>უჯრა</td>
    <td>უჯრა</td>
    <td>უჯრა</td>
  </tr>
</table>

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

Результат:

იხილეთ აგრეთვე