CSS приклад: empty-cells

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 4.0+ 1.2+ 1.0+ 1.0+ 1.0+

Коротка інформація

Значення за замовчуваннямshow
НаслідуєтьсяТак
ЗастосовуєтьсяДо <td>, <th> або до елементів з display: table-cell
Посилання на специфікаціюhttp://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Задає відображення меж та фону в комірці, якщо вона порожня. При одночасному додаванні до таблиці властивості border-collapse зі значенням collapse, властивість empty-cells ігнорується.

Комірка вважається порожньою у наступних випадках:

  • немає жодних символів;
  • в комірці міститься лише перенесення рядка, символ табуляції або пробіл;
  • значення visibility встановлено як hidden.

Додавання нерозривного пробілу &nbsp; розглядається як видимий вміст, тобто комірка вже буде непорожньою.

Синтаксис

empty-cells: show | hide

Значення

show
Відображає межу навколо комірки та фон в ній.
hide
Межа та фон у порожніх комірках не відображається. Якщо всі комірки в рядку порожні, то рядок приховується повністю.

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>empty-cells</title>
  <style>
   table {
    border: 4px double #399; /* Межа навколо таблиці */
   }
   td {
    background: #fc0; /* Колір фону */
    border: 1px solid #333; /* Межа навколо комірок */
    empty-cells: hide; /* Приховуємо порожні комірки */
    padding: 5px; /* Відступи в комірках */ 
   }
  </style>
 </head>
 <body>
  <table width="100%">
   <tr>
    <td>Леонардо</td><td>5</td><td>8</td>
   </tr>
   <tr>
    <td>Рафаель</td><td> </td><td>11</td>
   </tr>
   <tr>
    <td>Микеланджело</td><td>24</td><td></td>
   </tr>
   <tr>
    <td>Донателло</td><td>&nbsp;</td><td>13</td>
   </tr>
  </table>
 </body>
</html>

Результат цього прикладу у браузері Safari показаний на рис. 1. Той же приклад у браузері Internet Explorer 7 продемонстрований на рис. 2.

Браузери

Internet Explorer до версії 7.0 включно не підтримує властивість empty-cells і завжди відображає порожні комірки так, ніби для них встановлено empty-cellshide.

Firefox версії 2 і нижче не приховує рядок таблиці, якщо для всіх комірок задано empty-cells: hide і комірки порожні.

Браузер Opera до версії 9.27 включно не приховує рядок таблиці і для порожніх комірок відображає колір фону.

Часті запитання

  • Q: Як використовувати властивість empty-cells в CSS?

    A: Властивість empty-cells в CSS використовується для визначення, чи показувати рамку в таблиці навколо комірок, які не містять дані. Вона має значення 'show' (показувати рамку) або 'hide' (приховати рамку).

  • Q: Де можна використовувати властивість empty-cells в CSS?

    A: Властивість empty-cells в CSS можна використовувати в таблицях (тег <table>) для визначення відображення рамок навколо порожніх комірок.

  • Q: Як встановити значення 'hide' для властивості empty-cells в CSS?

    A: table { empty-cells: hide; }

  • Q: Як встановити значення 'show' для властивості empty-cells в CSS?

    A: table { empty-cells: show; }

  • Q: Як використовувати властивість empty-cells в поєднанні з іншими CSS-властивостями?

    A: Властивість empty-cells в CSS може бути комбінована з іншими властивостями таблиць, наприклад, з border-collapse та border-spacing, для створення відповідного вигляду таблиці.