Prazne stanice - CSS-trikovi

Anonim

empty-cellsNekretnina u CSS odabire praznih ćelija tablice radi određivanja hoće li se prikazati granice i pozadina na njih. Drugim riječima, on govori pregledniku hoće li povući granice oko ćelije tablice ili ispuniti pozadinu kada ta ćelija ne sadrži sadržaj. To je nekako poput primjene visibilitysvojstva na prazne ćelije tablice.

table ( empty-cells: show; )

Vrijednosti

empty-cellsObjekt ima dvije osnovne vrijednosti:

  • show: prikaz obruba i pozadine na praznoj ćeliji.
  • hide: ne prikazuje obrub ili pozadinu na praznoj ćeliji.

Također su prihvaćene sljedeće globalne vrijednosti:

  • inherit: nasljeđuje vrijednost svojstva nadređenog elementa.
  • initial: koristite definiranu zadanu vrijednost za svojstvo.
  • unset: resetiranje svojstva na naslijeđenu vrijednost.

Kada ga koristiti

Ovo je zanimljivo svojstvo jer CSS-u daje mogućnost provjere HTML oznaka za sadržaj unutar tablice i u skladu s tim reagira. Obično o CSS-u ne razmišljamo kao o dinamičnom jeziku, ali ovo je slučaj kada se približi.

Dobar slučaj upotrebe empty-cellsmogla bi biti situacija kada možda ne znate hoće li tablica sadržavati prazne točke podataka ili ne, a vi ih odlučite sakriti. Tablice su nekad bile faktički način izrade izgleda web stranica, pa bi mogao biti koristan alat za prikazivanje i skrivanje elemenata kada se tablice koriste za prezentaciju ili gdje elementi sadrže display: tablesvojstvo.

Demo

Pogledajte olovku mPLVzB by CSS-Tricks (@ css-tricks) na CodePenu.

Povezano

  • display
  • visibility
  • :empty

Više informacija

  • CSS razina 2 specifikacije
  • MDN referenca
  • SitePoint demonstracija na CodePenu
  • Slojevi tablice i demonstracija prozirnosti na CodePenu

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
1.0 1.2 1.1 4.0 8,0 1.0 3.1