caption-side
CSS nuosavybė leidžia jums nustatyti, kur dėti HTML'o
elementas, naudojamas HTML lentelėse. Ši savybė taip pat gali būti taikoma bet kuriam elementui, kurio
display
nuosavybė nustatyta caption-side
.
table ( caption-side: top; )
Vertybės
top
: numatytasis. Antraštę padėkite lentelės viršuje.bottom
: užrašo antraštę lentelės apačioje.inherit
: rodo, kad vertė paveldima išcaption-side
jos pirminės vertės
caption-side
Turtas gali būti taikomi arba į
element or the
display
table-caption
text-align
Atminkite, kad pirmiau nurodytos reikšmės caption-side
yra susijusios su lentelės rašymo režimu. Pvz., Jei lentelė nustatyta vertikalaus rašymo režimu, tada reikšmės top
ir bottom
reikšmės bus susijusios su lentelės kryptimi.
Žemiau esančioje demonstracinėje versijoje yra mygtukas „perjungti“, kuris perjungia lentelės caption-side
ypatybę tarp top
ir bottom
, todėl galite pamatyti skirtumą naudodami lentelę su daugybe duomenų eilučių:
Peržiūrėkite
CSS-Tricks (@ css-tricks) subtitrų nuosavybės „ Pen“ demonstracinę versiją
„CodePen“.
Kitoje demonstracinėje writing-mode
lentelės lentelė yra nustatyta vertical-rl
. Kaip rodo perjungimas naudojant mygtuką, top
ir bottom
reikšmės yra susijusios su lentelės rašymo režimu:
Peržiūrėkite
„CSS-Tricks“ („@ css-tricks“)
antraštės pusės ypatybės „Rašyklės demonstravimas“ su skirtingu rašymo režimu .
Nestandartinės tik „Firefox“ vertės
„Firefox“ jau seniai palaiko ir vis dar palaiko keturias nestandartines reikšmes caption-side
:
left
: užrašo antraštę lentelės kairėje.right
: užrašo antraštę lentelės dešinėje.top-outside
: užrašą užrašo lentelės viršuje, jo matmenys nepriklauso nuo lentelėsbottom-outside
: užrašą užrašo lentelės apačioje, jos matmenys nepriklauso nuo lentelės
Žemiau pateiktas demonstracinis variantas veikia tik „Firefox“ ir leidžia naudoti keturis mygtukus, kad nustatytumėte skirtingas nestandartines vertes:
Peržiūrėkite
„CSS-Tricks“ („@ css-tricks“) „ Pen Firefox“ skirtą tik subtitrų nuosavybės demonstracinę versiją
„CodePen“.
Naujos standartinės vertybės
Per paskutinius projektus CSS specifikacija, caption-side
turtas yra dalis CSS Loginiai Properties Level 1 ir apima vertybes block-start
, block-end
, inline-start
, ir inline-end
. Pastarieji du atitinka nestandartinius parametrus left
ir right
reikšmes, todėl juos palaiko tik vartotojų agentai, palaikantys tas nestandartines reikšmes.
Daugiau informacijos
- antraštės pusės ypatybė CSS2.1 specifikacijoje
- antraštės pusės ypatybė CSS2.2 specifikacijoje
- CSS loginių ypatybių 1 antraštė
Naršyklės palaikymas
elementas, turintis tą patį efektą. Nors ši ypatybė paveiks viso antraštės laukelio padėtį (skaičiuojama antraštės vertė), ji neturės įtakos teksto lygiavimui laukelio viduje. Tekstas laukelyje gali būti sulygiuotas naudojant ypatybę.„Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
---|---|---|---|---|---|---|
1+ | 1+ | 1+ | 9,2+ | 8+ | 2.1+ | 3.2+ |
Palaikymas aukščiau pateiktoje lentelėje nurodo pagrindinį standarto top
ir bottom
verčių palaikymą. "Firefox" taip pat papildomai palaiko nestandartinius left
, right
, top-outside
ir bottom-outside
vertybes. Nėra naršyklė parama naujų block-start
, block-end
, inline-start
, ir inline-end
vertybes.