Caption-side - CSS-Tricks

Anonim

caption-sideProprietatea în CSS vă permite să definiți în cazul în care în poziția lui HTML

element, utilizat pe tabele HTML. Această proprietate se poate aplica și oricărui element a cărui displayproprietate este setată la caption-side.

table ( caption-side: top; )

Valori

  • top: implicit. Poziționează legenda în partea de sus a tabelului.
  • bottom: poziționează legenda în partea de jos a tabelului.
  • inherit: indică faptul că valoarea este moștenită de la caption-sidevaloarea părintei sale

caption-sideProprietatea poate fi aplicat fie


element or the

display table-caption text-align

Rețineți că valorile de mai sus pentru caption-sidesunt relative la modul de scriere al tabelului. De exemplu, dacă un tabel este setat la un mod de scriere vertical, atunci valorile topși bottomvor fi relative la direcția tabelului.

Demo-ul de mai jos include un buton „comutare” care comută caption-sideproprietatea tabelului între topși bottom, astfel încât să puteți vedea diferența folosind un tabel cu mai multe rânduri de date:

Vedeți
Demo- ul stiloului de proprietate pe partea subtitrării de către CSS-Tricks (@ css-tricks)
pe CodePen.

În următoarea demonstrație, writing-modepentru tabel este setat la vertical-rl. După cum se demonstrează prin comutarea utilizând butonul, valorile topși bottomsunt relative la modul de scriere al tabelului:

Vedeți
Demo- ul stiloului cu proprietatea pe partea de subtitrare cu un mod de scriere diferit de CSS-Tricks (@ css-tricks)
pe CodePen.

Valori non-standard numai pentru Firefox

Firefox a acceptat de mult și încă acceptă patru valori non-standard pentru caption-side:

  • left: poziționează legenda în stânga tabelului.
  • right: poziționează legenda în dreapta tabelului.
  • top-outside: poziționează legenda în partea de sus a tabelului, cu dimensiunile sale independente de tabel
  • bottom-outside: poziționează legenda în partea de jos a tabelului, cu dimensiunile sale independente de tabel

Demo-ul de mai jos funcționează numai în Firefox și vă permite să utilizați patru butoane pentru a seta diferitele valori non-standard:

Vedeți
demo-ul Pen Firefox, doar al proprietății de sub-titlu de către CSS-Tricks (@ css-tricks)
pe CodePen.

Noi valori standard

În cele mai recente proiecte ale caietului de sarcini CSS, caption-sideproprietatea este parte a CSS Logic Proprietăți de nivel 1 și include valorile block-start, block-end, inline-startși inline-end. Ultimele două corespund valorilor non-standard leftși righttrebuie să fie acceptate doar de agenții utilizator care acceptă acele valori non-standard.

Mai multe informatii

  • caption-side property în spec. CSS2.1
  • caption-side property în spec. CSS2.2
  • caption-side în Proprietăți logice CSS 1

Suport pentru browser

element, cu același efect. În timp ce această proprietate va afecta poziția casetei de subtitrări în ansamblu (valoarea unei subtitrări se calculează la), nu va afecta alinierea textului în interiorul casetei. Textul din interiorul casetei poate fi aliniat folosind proprietatea.
Crom Safari Firefox Operă IE Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Suportul din tabelul de mai sus se referă la suportul de bază pentru standard topși bottomvalori. Firefox sprijină , de asemenea , în plus, non-standard left, right, top-outsideși bottom-outsidevalori. Nu există nici un sprijin browser - ul pentru noi block-start, block-end, inline-startși inline-endvalorile.