empty-cellsВластивість в порожніх таблицях CSS вибирає осередки з метою визначення того , чи потрібно відображати кордону і фон на них. Іншими словами, він повідомляє браузеру, накреслювати межі навколо комірки таблиці або заповнювати фон, якщо ця комірка не містить вмісту. Це як би застосовувати visibilityвластивість до порожніх комірок таблиці.
table ( empty-cells: show; )Цінності
empty-cellsВластивість має два основних значення:
show: відобразити межу та фон на порожній комірці.hide: не відображає межу або фон на порожній комірці.
Також приймаються наступні глобальні значення:
inherit: успадкувати значення властивості батьківського елемента.initial: використовуйте визначене значення за замовчуванням для властивості.unset: скинути властивість до успадкованого значення.
Коли використовувати
Це цікава властивість, оскільки вона надає CSS можливість перевіряти розмітку HTML на вміст усередині таблиці та відповідати відповідно. Зазвичай ми не думаємо про CSS як про динамічну мову, але це приклад, коли він наближається досить близько.
Хорошим варіантом використання empty-cellsможе бути ситуація, коли ви можете не знати, чи буде таблиця містити чи ні порожні точки даних, і ви вирішите їх приховати. Раніше таблиці були фактичним способом побудови макетів веб-сторінок, тому це може бути корисним інструментом для показу та приховування елементів, коли таблиці використовуються для презентації або де елементи містять display: tableвластивість.
Демо
Див. Pen mPLVzB від CSS-Tricks (@ css-tricks) на CodePen.
Пов’язані
displayvisibility:empty
Більше інформації
- CSS Level 2 специфікація
- Довідка MDN
- Демонстрація SitePoint на CodePen
- Шари таблиці та демонстрація прозорості на CodePen
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8,0 | 1.0 | 3.1 |