Атрибут empty-cells в CSS

9 червня 2022 р.344

Зміст

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

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

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

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

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

Значення за замовчуванням	show
Успадковується	Так
Застосовується	До <td>, <th> або до елементів, у яких display: table-cell
Анімується	Ні

Синтаксис

<code>empty-cells: show | hide

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися в зазначеному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

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

-text-long field-label-above">

Пісочниця

Леонардо	5	8
Рафаель	24	11
Мікеланджело		3
Донателло	10	13

show hide

td { empty-cells: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>empty-cells</title> <style> table { width: 100%; /* Ширина таблиці */
border: 4px double #399; /* Кордон навколо таблиці */
} 
td { background: #fc0; /* Колір тла */
border: 1px solid #333; /* Кордон навколо осередків */
empty-cells: hide; /* Ховаємо порожні комірки */
padding: 5px; /* Поля в осередках */
}
</style>
</head>
<body> <table> <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>

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

Вигляд таблиці в браузері Internet Explorer

Мал. 1. Вигляд таблиці у браузері Internet Explorer

Вигляд таблиці у браузері Internet Explorer 7

Мал. 2. Вигляд таблиці в браузері Internet Explorer 7

Об'єктна модель

Об'єкт.style.emptyCells

Примітка

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

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

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

Специфікація

Специфікація	Статус
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


8	12	1	4	1	1


1	1	6	3.1

Браузери

У таблиці браузерів застосовуються такі позначення.

— властивість повністю підтримується браузером з усіма допустимими значеннями;
> — властивість браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення де або властивість застосовується не до всіх елементів, які вказані в специфікації.

Число вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">

Таблиці