Pealdise pool - CSS-trikid

Anonim

caption-sideVara CSS võimaldab määrata, kus asendisse HTML on

element, mida kasutatakse HTML-tabelites. Seda omadust saab rakendada ka mis tahes elemendi jaoks, mille displayatribuudiks on määratud caption-side.

table ( caption-side: top; )

Väärtused

  • top: vaikimisi. Paigutab pealdise tabeli ülaossa.
  • bottom: paigutab pealdise tabeli alaossa.
  • inherit: näitab, et väärtus on päritud caption-sidetema vanema väärtusest

caption-sideVara saab rakendada kas Euroopa


element or the

display table-caption text-align

Pange tähele, et ülaltoodud väärtused väärtusele caption-sideon suhtelised tabeli kirjutamisrežiimiga. Näiteks kui tabel on seatud vertikaalsele kirjutamisrežiimile, on väärtused topja bottomväärtused tabeli suuna suhtes.

Allpool olev demo sisaldab nuppu „ümberlülitamine“, mis vahetab tabeli caption-sideatribuudi topja vahel bottom, nii et näete erinevust paljude andmeridadega tabeli abil:

Vaadake
CSS-
Tricksi (@ css-tricks) subtiitrite külje omaduse pliiatsi demot CodePenis.

Järgmises demos writing-modeon tabeli jaoks seatud vertical-rl. Nagu nupu abil ümberlülitamine näitab, on väärtused topja bottomväärtused tabeli kirjutamisrežiimi suhtes:

Vaadake CSP
-
Tricksi (@ css-tricks) CSP - Tricksi (@ css-tricks) pealdiste-poolse omaduse pliiatsi demot.

Mittestandardsed ainult Firefoxi väärtused

Firefox on pikka aega toetanud ja toetab endiselt nelja mittestandardset väärtust caption-side:

  • left: paigutab pealdise tabelist vasakule.
  • right: paigutab pealdise tabelist paremale.
  • top-outside: paigutab pealdise tabeli ülaossa, selle mõõtmed on tabelist sõltumatud
  • bottom-outside: paigutab pealdise tabeli alaossa mõõtmetega tabelist sõltumatult

Allpool esitatud demo töötab ainult Firefoxis ja võimaldab erinevate mittestandardsete väärtuste määramiseks kasutada nelja nuppu:

Vaadake CSP
-
Tricksi (@ css-tricks) CSP -Tricks (@ css-tricks) ainuüksi subtiitrite omaduse Pen Firefoxi ainult demot .

Uued standardväärtused

Viimases eelnõud CSS spetsifikatsioonis caption-sidevara on osa CSS Loogiline omadused Level 1 ja sisaldab väärtusi block-start, block-end, inline-start, ja inline-end. Kaks viimast vastavad mittestandardsetele leftja rightväärtustele ning neid peavad toetama ainult nende mitteavaldatud väärtusi toetavad kasutajaagendid.

Rohkem informatsiooni

  • CSS2.1 spetsifikatsiooni pealkirjapoolne omadus
  • CSS2.2 spetsifikatsiooni pealkirjapoolne omadus
  • CSS-i loogiliste atribuutide pealdiste pool 1

Brauseri tugi

element, sama efektiga. Kuigi see omadus mõjutab subtiitrikasti asukohta tervikuna (pealdise väärtus arvutatakse), ei mõjuta see kasti sees oleva teksti joondamist. Kasti sees olevat teksti võidakse atribuudi abil joondada.
Chrome Safari Firefox Ooper IE Android iOS
1+ 1+ 1+ 9,2+ 8+ 2.1+ 3,2+

Ülaltoodud tabeli tugi viitab standardi topja bottomväärtuste põhitoele. Firefox ka lisaks toetab mittestandardsed left, right, top-outside, ja bottom-outsideväärtused. Ei ole brauseri toetust uuele block-start, block-end, inline-start, ja inline-endväärtused.