empty-cells

Вы можете приобрести локальную версию справочника по CSS в формате CHM или HTML

Браузер	Internet Explorer				Netscape		Opera			Safari			Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Нет	?	Ошибки	Ошибки	Ошибки	Ошибки	Ошибки	Да	Да	Да	Ошибки	Ошибки	Да

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

CSS	CSS2
Значение по умолчанию	show
Наследуется	Да
Применяется	К <TD>, <TH> или к элементам, у которых display: table-cell
Аналог HTML	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells

Описание

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

Ячейка считается пустой в следующих случаях:

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

Добавление неразрывного пробела   воспринимается как видимое содержание, т.е. ячейка уже будет непустой.

Синтаксис

empty-cells: show | hide

Аргументы

show: Отображает границу вокруг ячейки и фон в ней.
hide: Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.

Пример

HTML 4.01CSS 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>empty-cells</title>
  <style type="text/css">
   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>

Результат данного примера в браузере Opera показан ни рис. 1. Тот же пример в браузере Firefox продемонстрирован на рис. 2.

Рис. 1

Рис. 1. Вид таблицы в браузере Opera 9.2

Рис. 2

Рис. 2. Вид таблицы в браузере Firefox 2

Браузеры

Internet Explorer не поддерживает параметр empty-cells и отображает пустые ячейки всегда так, словно для них установлено empty-cells: hide.

Firefox версии 2 и ниже (а также Netscape) не прячет строку таблицы, если для всех ячеек задано empty-cells: hide и ячейки пусты.

Браузер Opera не скрывает строку таблицы и для пустых ячеек отображает цвет фона (см. рис. 1).