empty-cellsĪpašums CSS izvēlas tukšas tabulas šūnas, lai precizētu, vai rādīt robežas un fonus uz tiem. Citiem vārdiem sakot, tas pārlūkprogrammai norāda, vai zīmēt robežas ap tabulas šūnu vai aizpildīt fonu, ja šūnā nav satura. Tas ir līdzīgi kā visibilityrekvizīta piemērošana tukšajām tabulas šūnām.
table ( empty-cells: show; )Vērtības
empty-cellsĪpašumā ir divas galvenās vērtības:
show: parādiet apmali un fonu tukšā šūnā.hide: tukšā šūnā neparāda apmali vai fonu.
Tiek pieņemtas arī šādas globālās vērtības:
inherit: mantot pamatelementa rekvizīta vērtību.initial: izmantojiet rekvizītam definēto noklusējuma vērtību.unset: atiestatiet īpašumu uz mantoto vērtību.
Kad to lietot
Tas ir interesants rekvizīts, jo tas dod CSS iespēju pārbaudīt HTML marķējumu saturam tabulas iekšienē un atbilstoši reaģēt. Mēs parasti nedomājam par CSS kā dinamisku valodu, bet tas ir gadījums, kad tas ir diezgan tuvu.
Labs izmantošanas gadījums empty-cellsvarētu būt situācija, kad jūs, iespējams, nezināt, vai tabulā būs vai nebūs tukšu datu punktu, un jūs nolemjat tos paslēpt. Kādreiz tabulas bija faktiskais veids, kā tika veidoti tīmekļa lapu izkārtojumi, tāpēc tas varētu būt noderīgs rīks, lai parādītu un paslēptu elementus, ja tabulas tiek izmantotas prezentēšanai vai ja elementos ir display: tableīpašums.
Demonstrācija
Skatiet CSS-Tricks (@ css-tricks) pildspalvu mPLVzB vietnē CodePen.
Saistīts
displayvisibility:empty
Vairāk informācijas
- CSS 2. līmeņa spec
- MDN atsauce
- SitePoint demonstrācija vietnē CodePen
- Tabulas slāņi un pārredzamības demonstrācija vietnē CodePen
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |