Den caption-sideegendom i CSS kan du definiera var att placera HTML s
element som används i HTML-tabeller. Den här egenskapen kan också tillämpas på alla element vars displayegendom är inställd på caption-side.
table ( caption-side: top; )Värden
top: standarden. Placerar bildtexten högst upp på bordet.bottom: placerar bildtexten längst ner på bordet.inherit: indikerar att värdet ärvs fråncaption-sidevärdet på dess förälder
Den caption-sideegenskapen kan appliceras antingen till
element or the
display table-caption text-align
Observera att ovanstående värden för caption-sideär relativt tabellens skrivläge. Till exempel om en tabell är satt till ett vertikalt skrivläge, sedan topoch bottomvärden kommer att vara i förhållande till riktningen av bordet.
Demonstrationen nedan innehåller en “växlingsknapp” som växlar mellan tabellens caption-sideegendom mellan topoch bottomså att du kan se skillnaden med en tabell med många datarader:
Se pendemonstrationen
av bildtextsegenskapen av CSS-Tricks (@ css-tricks)
på CodePen.
I nästa demo är writing-modetabellen för vertical-rl. Som framgår genom att växla med hjälp av knappen, topoch bottomvärdena är i förhållande till bordets skrivande-mode:
Se penndemo
för egendom med bildtext med olika skrivlägen av CSS-Tricks (@ css-tricks)
på CodePen.
Icke-standardvärden för Firefox
Firefox har länge stött, och stöder fortfarande, fyra icke-standardvärden för caption-side:
left: placerar bildtexten till vänster om bordet.right: placerar bildtexten till höger om bordet.top-outside: placerar bildtexten högst upp på bordet, med dess mått oberoende av bordetbottom-outside: placerar bildtexten längst ner på bordet, med dess mått oberoende av bordet
Demonstrationen nedan fungerar bara i Firefox och låter dig använda fyra knappar för att ställa in olika icke-standardvärden:
Se den endast penna
-demo av CSS-Tricks (@ css-tricks)
på CodePen.
Nya standardvärden
I de senaste utkast till CSS-specifikationen, den caption-sideär egendom del av CSS Logical Properties nivå 1 och omfattar värden block-start, block-end, inline-start, och inline-end. De två sistnämnda motsvarar icke-standard leftoch rightvärden, och krävs endast för att stödjas av användaragenter som stöder dessa icke-standardvärden.
Mer information
- bildtextsida i CSS2.1 spec
- bildtextsida i CSS2.2 spec
- bildtextsida i CSS logiska egenskaper 1
Webbläsarstöd
med samma effekt. Även om den här egenskapen kommer att påverka positionen för bildtexten som helhet (en bildtexts värde beräknas till), kommer det inte att påverka textens inriktning inuti rutan. Text i rutan kan justeras med hjälp av egenskapen.| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ | 8+ | 2.1+ | 3.2+ |
Stöd i tabellen ovan hänvisar till grundläggande stöd för standarden topoch bottomvärdena. Firefox också dessutom stödjer icke-standardiserade left, right, top-outsideoch bottom-outsidevärderingar. Det finns ingen webbläsare stöd för de nya block-start, block-end, inline-startoch inline-endvärderingar.