css властивість empty-cells

Властивість empty-cells задає відображення рамок та фону комірки, якщо вона порожня.

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

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

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

Порожні клітинки таблиці - це клітинки, які не містять видимого вмісту. Видимий вміст містить   і інші пробіли, крім ASCII CR (\ 0D), LF (\ 0A), вкладка (\09) і пробіл (\20).

Коли властивість порожніх комірок встановлено для показу (show), межі намальовані навколо порожньої клітини, а фони малюються за нею. Якщо ввімкнути приховування(hide), навколо не малюються межі і фон.

Також, якщо всі клітинки в рядку мають значення hide і не мають видимого вмісту, то рядок має нульову висоту.

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

empty-cells: show|hide|initial|inherit;

Властивість empty-cells може отримувати 4 значень:

show

Без задання. Відображає рамку навколо порожньої клітинки і фон в ній.

автор: Svitlana

правити

hide

Рамка та фон в порожніх клітинках не відображається. Якщо всі клітинки в рядку порожні, то рядок ввесь ховається.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
empty-cells	1.0	1.0	1.0	4.0	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
empty-cells	1.0	1.0	3.1

Приклади

+ запропонувати свій приклад у пісочниці

<table class="hide">
    <tr><td>hide</td><td></td></tr>
</table>
<table class="show">
    <tr><td>show</td><td></td></tr>
</table>

table {
    border-collapse: separate;
    margin-bottom: 12px;
}

td {
    border: 1px solid #0172ad;
    padding: 6px;
    min-width: 60px;
}

.hide { empty-cells: hide; }
.show { empty-cells: show; }