La caption-sideproprietà in CSS consente di definire dove posizionare gli HTML
elemento, utilizzato nelle tabelle HTML. Questa proprietà può essere applicata anche a qualsiasi elemento la cui displayproprietà è impostata su caption-side.
table ( caption-side: top; )Valori
top: il predefinito. Posiziona la didascalia nella parte superiore della tabella.bottom: posiziona la didascalia in fondo alla tabella.inherit: indica che il valore è ereditato dalcaption-sidevalore del suo genitore
La caption-sideproprietà può essere applicata sia al file
element or the
display table-caption text-align
Si noti che i valori di cui sopra per caption-sidesono relativi alla modalità di scrittura della tabella. Ad esempio, se una tabella è impostata su una modalità di scrittura verticale, i valori tope bottomsaranno relativi alla direzione della tabella.
La demo seguente include un pulsante "attiva / disattiva" che alterna la caption-sideproprietà della tabella tra tope bottom, così puoi vedere la differenza usando una tabella con molte righe di dati:
Vedi la Pen
Demo della proprietà caption-side di CSS-Tricks (@ css-tricks)
su CodePen.
Nella prossima demo, il writing-modeper la tabella è impostato su vertical-rl. Come dimostrato alternando utilizzando il pulsante, i valori tope bottomsono relativi alla modalità di scrittura della tabella:
Guarda la
demo della penna della proprietà caption-side con modalità di scrittura diversa da CSS-Tricks (@ css-tricks)
su CodePen.
Valori non standard solo per Firefox
Firefox ha a lungo supportato e supporta ancora quattro valori non standard per caption-side:
left: posiziona la didascalia a sinistra della tabella.right: posiziona la didascalia a destra della tabella.top-outside: posiziona la didascalia nella parte superiore della tabella, con le sue dimensioni indipendenti dalla tabellabottom-outside: posiziona la didascalia in fondo alla tabella, con le sue dimensioni indipendenti dalla tabella
La demo di seguito funziona solo in Firefox e consente di utilizzare quattro pulsanti per impostare i diversi valori non standard:
Guarda la
demo di Pen Firefox della proprietà caption-side di CSS-Tricks (@ css-tricks)
su CodePen.
Nuovi valori standard
Negli ultimi bozze delle specifiche CSS, la caption-sidestruttura è parte di CSS Logical Proprietà livello 1 e comprende i valori block-start, block-end, inline-start, e inline-end. Gli ultimi due corrispondono ai valori non standard lefte right, e devono essere supportati solo da programmi utente che supportano quei valori non standard.
Maggiori informazioni
- proprietà caption-side nelle specifiche CSS2.1
- proprietà caption-side nelle specifiche CSS2.2
- lato didascalia nelle proprietà logiche CSS 1
Supporto browser
elemento, con lo stesso effetto. Sebbene questa proprietà influenzerà la posizione della casella della didascalia nel suo insieme (il valore di una didascalia viene calcolato su), non influirà sull'allineamento del testo all'interno della casella. Il testo all'interno della casella può essere allineato utilizzando la proprietà.| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ | 8+ | 2.1+ | 3.2+ |
Il supporto nella tabella sopra si riferisce al supporto di base per lo standard tope i bottomvalori. Firefox supporta anche inoltre il non-standard left, right, top-outside, e bottom-outsidevalori. Non v'è alcun supporto del browser per i nuovi block-start, block-end, inline-start, e inline-endvalori.