empty-cellsCSS parenka tuščių langelių lentelės turtas už nurodant, ar nerodyti sienas ir fonas ant jų paskirtį. Kitaip tariant, naršyklei nurodoma, ar brėžti sienas aplink lentelės langelį, ar užpildyti foną, kai toje langelyje nėra jokio turinio. Tai tarsi visibilitysavybės pritaikymas tuščiose lentelės langeliuose.
table ( empty-cells: show; )Vertybės
empty-cellsViešbutyje yra du pagrindiniai reikšmes:
show: tuščioje langelyje rodyti kraštinę ir foną.hide: tuščiame langelyje nerodoma kraštinė ar fonas.
Taip pat priimamos šios pasaulinės vertės:
inherit: paveldėti pirminio elemento nuosavybės vertę.initial: naudokite apibrėžtą numatytąją ypatybės vertę.unset: nustatykite nuosavybę į paveldėtą vertę.
Kada jį naudoti
Tai yra įdomi savybė, nes ji suteikia CSS galimybę patikrinti HTML žymėjimą dėl turinio lentelės viduje ir atitinkamai reaguoti. Mes paprastai negalvojame apie CSS kaip apie dinamišką kalbą, tačiau tai yra atvejis, kai jis yra gana artimas.
Tinkamas naudojimo atvejis empty-cellsgali būti situacija, kai galite nežinoti, ar lentelėje bus tuščių duomenų taškų, ar ne, ir nusprendėte juos paslėpti. Lentelės anksčiau buvo de facto kuriamos tinklalapių maketai, todėl tai gali būti naudinga priemonė rodyti ir paslėpti elementus, kai lentelės naudojamos pristatymui arba kai elementuose yra display: tablesavybė.
Demonstracija
Peržiūrėkite „CSS-Tricks“ rašiklį „mPLVzB“ (@ css-tricks) „CodePen“.
Susijęs
displayvisibility:empty
Daugiau informacijos
- CSS 2 lygio spec
- MDN nuoroda
- „SitePoint“ demonstracinė versija „CodePen“
- „CodePen“ lentelių sluoksniai ir skaidrumo demonstracija
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |