Właściwość CSS empty-cells

tutoriale

Kategoria wpisu Kurs CSS, Kurs HTML, Kursy, PHP, HTML, CSS, Table Tagi: , , , , , on przez .



Reading Time: 1 minute

Właściwość CSS empty-cells w dużym skrócie służy do ukrywanie niewypełnionych pól. Innymi słowy empty-cells informuje przeglądarkę o tym, że jeśli dany element jest pusty nie ma ona go wyświetlać.

Parametry empty-cells

Właściwość empty-cells przyjmuje tylko dwa specyficzne dla siebie parametry:

  • show: wyświetl obramowanie i tło pustej komórki.
  • hide: ukryj obramowanie i tło pustej komórki (empty cell).

Dodatkowo obsługiwane są również parametry globalne:

  • inherit: dziedziczy ustawienia rodzica (nadrzędnego).
  • initial: użyj zdefiniowanej wartości domyślnej dla właściwości.
  • unset: zresetuj właściwość do jej odziedziczonej wartości.

Przykładowa dekaracja CSS

Działanie właściwości empty-cells

Do czego może się przydać?

Jest to ciekawe rozwiązanie w przypadku kiedy z różnych przyczyn decydujemy się na budowę strony internetowej z pomocą tabel. Nie jesteśmy w tedy w stanie przewidzieć czy wszystkie pola zostaną przez nas wypełnione. Dzięki zastosowaniu tej właściwości problem pustych przestrzeni rozwiąże się sam.

Przykłady:

See the Pen mPLVzB by CSS-Tricks (@css-tricks) on CodePen.0

empty-cells

Przeczytaj również

Odstępy między komórkami w Tabeli kurs HTML Czasami w celu poprawy wyglądu tabeli chcemy oddzielić od siebie poszczególne komórki. Do tego celu wykorzystać możemy: Gdzie zmienna cellspacing ...
Ciekawe efekty na tekście z zastosowaniem cienia Tym razem przygotowałam dla was zbiór kilku ciekawych efektów z zastosowaniem text-shadow - czyli cienia pod tekstem. Oczywiście te animacje wykorz...
Budujemy prostą stronę internetową cz. 1 Dziś zaczynam na blogu cykl, który powinien znaleźć się tutaj wcześniej czyli "Budujemy prostą stronę internetową". Do tej pory omówiłam wiele aspektó...
Rodzaje kursora myszy Czasami w celu uatrakcyjnienia witryny internetowej chcemy zmienić kształty kursora myszy. Nie potrzebujemy do tego wszędzie obecnego JS wystarczy nam...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *