JS властивість CSSStyleDeclaration.emptyCells

Загальний опис

element.style.emptyCells — це властивість CSS, яка використовується для визначення того, чи повинні відображатися межі порожніх комірок у таблицях. Властивість може приймати значення show або hide.

Використання element.style.emptyCells дозволяє контролювати вигляд таблиці, коли деякі з її комірок не містять жодного контенту. Це може бути корисно для покращення візуальної привабливості таблиці або для відповідності певному стилістичному оформленню.

Щоб застосувати властивість до певної таблиці або комірки, спочатку треба отримати доступ до елемента за допомогою JavaScript. Наприклад, для того, щоб показати межі порожніх комірок в таблиці:

let table = document.getElementById('myTable');
table.style.emptyCells = 'show';

Навпаки, щоб приховати межі порожніх комірок:

table.style.emptyCells = 'hide';

Деталі роботи з властивістю

Значення show означає, що межі порожніх комірок таблиці будуть відображатися так само, як і межі заповнених комірок. Це значення є типовим для браузерів:

table.style.emptyCells = 'show';

Значення hide приховує межі порожніх комірок, залишаючи їх невидимими, що може зробити таблицю менш навантаженою візуально:

table.style.emptyCells = 'hide';

Ця властивість особливо корисна при роботі з таблицями, що містять багато порожніх комірок, які можуть нести лише декоративне навантаження. За допомогою emptyCells можна уникнути зайвого візуального шуму.

Практичний приклад

Уявімо, що у вас є таблиця з декількома порожніми комірками, і ви хочете керувати їх відображенням:

let table = document.createElement('table');
let row = table.insertRow();
let cell1 = row.insertCell();
let cell2 = row.insertCell();
cell1.innerHTML = 'Заповнена комірка';
cell2.innerHTML = ''; // Порожня комірка

document.body.appendChild(table);

// Показати межі порожніх комірок
table.style.emptyCells = 'show';

// Приховати межі порожніх комірок
setTimeout(() => {
    table.style.emptyCells = 'hide';
}, 3000);

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

Таким чином, element.style.emptyCells — це простий, але потужний інструмент для керування відображенням таблиць у веб-розробці, дозволяючи контролювати візуальне представлення порожніх комірок.

правити

Порада

Не забувайте про те, що CSS властивість "emptyCells" працює лише для елементів таблиць. Якщо ви хочете приховати чи показати порожні елементи в інших частинах вашого інтерфейсу, потрібно використовувати інші методи. Наприклад, ви можете контролювати видимість елементів за допомогою "display" чи "visibility" в залежності від умов вашої програми.

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

Порада

Коли ви працюєте з динамічним контентом, наприклад, заповнюєте таблицю даними з API, важливо мати контроль над відображенням порожніх комірок. Ви можете встановити значення 'show' або 'hide' для різних станів таблиці, залежно від наявності даних. Це дозволяє більш точно контролювати вигляд таблиці в різних умовах:

fetch('api/data')
    .then(response => response.json())
    .then(data => {
        if (data.length === 0) {
            document.querySelector('table').style.emptyCells = 'hide';
        } else {
            document.querySelector('table').style.emptyCells = 'show';
        }
    });

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

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

Синтаксис

element.style.emptyCells

Переглядачі

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

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

Переглядач
	1	1	1.2	4	12	8

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

Переглядач
	4.4	18	4	1

Приклади

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

// Дані таблиці (у житті — з fetch); частина комірок порожня
const data = [
    ['Січень', '100', ''],
    ['Лютий', '', '80'],
    ['', '', ''],
];

let table = document.createElement('table');
table.border = '1';

data.forEach(rowData => {
    let row = table.insertRow();

    rowData.forEach(cellData => {
        let cell = row.insertCell();
        cell.innerHTML = cellData || '';
    });
});

let emptyCellsCount = table.querySelectorAll('td:empty').length;
table.style.emptyCells = emptyCellsCount > 5 ? 'hide' : 'show';

console.log('Порожніх комірок:', emptyCellsCount, '→ emptyCells =', table.style.emptyCells);
document.body.appendChild(table);

let table = document.createElement('table');
let row = table.insertRow();
for (let i = 0; i < 3; i++) {
    let cell = row.insertCell();
    if (i % 2 === 0) cell.innerHTML = 'Зміст';
}

document.body.appendChild(table);

let button = document.createElement('button');
button.innerHTML = 'Перемкнути порожні комірки';
document.body.appendChild(button);

button.addEventListener('click', () => {
    table.style.emptyCells = table.style.emptyCells === 'hide' ? 'show' : 'hide';
});