Русский
Русский
English
Свойства CSS
Статистика
Реклама

empty-cells

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Возможно неправильное отображение
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Возможно неправильное отображение
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию show
Наследуется Да
Применяется К <TD>, <TH> или к элементам, у которых display: table-cell
Ссылка на спецификацию открыть в новой вкладке
Описание
Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.
Ячейка считается пустой в следующих случаях:
  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden.
  • Добавление неразрывного пробела &nbsp; воспринимается как видимое содержание, т.е. ячейка уже будет непустой.
    Синтаксис
    empty-cells: show | hide
    Аргументы
    show - Отображает границу вокруг ячейки и фон в ней.
    hide - Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.
    Пример

    <!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>
    </body>
    </html>

    Демонстрация примера
    Результат данного примера в браузере Safari показан ни рис. 1. Тот же пример в браузере Internet Explorer 7 продемонстрирован на рис. 2.
    Рис. 1. Вид таблицы в браузере Safari
    Рис. 2. Вид таблицы в браузере Internet Explorer 7
    Браузеры
    Internet Explorer до версии 7.0 включительно не поддерживает свойство empty-cells и отображает пустые ячейки всегда так, словно для них установлено empty-cells: hide.
    Firefox версии 2 и ниже не прячет строку таблицы, если для всех ячеек задано empty-cells: hide и ячейки пусты.
    Браузер Opera до версии 9.27 включительно не скрывает строку таблицы и для пустых ячеек отображает цвет фона.
    Первоисточник - htmlbook.ru Автор - Влад Мержевич
    Комментариев (-)
    Имя
    Электронная почта

    Последние комментарии

    © 2006-2025, heroes-3.ru