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

Результат:

Տես նաև