Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство empty-cells

Дата:28.09.15 в 18:30
Справочник: 

Характеристики свойства

В каких браузерах работает?

8.0+ 1.0+ 4.0+ 1.2+ 1.0+ 1.0+ 1.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- + + +

Для чего используется?

Определяет особенности отображения пустых ячеек. Стоит отметить, что данное свойство перекрывается значением collapse у правила border-collapse.

Ячейка считается пустой, когда:

  • отсутствует какие либо знаки и буквы;
  • если стоит пробел, табуляция или прочие знаки, которые не выводятся;
  • если прописано hidden для атрибута visibility.

Использование конструкции  , которая обозначает пробел, превращает пустую ячейку в заполненную.

Как правильно задавать?

empty-cells: hide;

Какие могут быть значения?

  • show - разрешает отображение заднего фона и рамку ячейки.
  • hide - убирает все вспомогательные элементы из вывода. Если все ячейки в строчке не имеют внутренностей, то скрывается и строка тоже.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойства empty-cells</title>
  <style>
   table {
    border: 1px solid #000; 
   }
   td {
    background: #b04d4d; 
    border: 1px solid #444; 
    empty-cells: hide;
    padding: 3px;
   }
  </style>
 </head>
 <body>
  <table width="100%">
   <tr>
    <td>Лобанов</td>
	<td></td>
	<td>Терапия</td>
	<td>Кожвен</td>
	<td>Травматология</td>
   </tr>
 
   <tr>
    <td>Романенко</td>
	<td>Терапия</td>
	<td></td>
	<td>Кожвен</td>
	<td>Травматология</td>
   </tr>
 
   <tr>
    <td>Фил</td>
	<td>Терапия</td>
	<td>Кожвен</td>
	<td></td>
	<td>Травматология</td>
   </tr>
 
   <tr>
    <td>Черноус</td>
	<td>Терапия</td>
	<td>Кожвен</td>
	<td>Травматология</td>
	<td></td>
   </tr>
  </table>
 </body>
</html>

По итогу получаем

empty-cells

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: