Strona podpisu - CSS-Tricks

caption-sideNieruchomość w CSS pozwala określić, gdzie umieścić w formacie HTML

element, używany w tabelach HTML. Ta właściwość może również dotyczyć dowolnego elementu, którego displaywłaściwość jest ustawiona na caption-side.

table ( caption-side: top; )

Wartości

• top: domyślny. Umieszcza podpis u góry tabeli.
• bottom: umieszcza podpis na dole tabeli.
• inherit: wskazuje, że wartość jest dziedziczona z caption-sidewartości swojego rodzica

caption-sideNieruchomość może być stosowany zarówno do


element or the

display table-caption text-align

Zauważ, że powyższe wartości dla caption-sideodnoszą się do trybu zapisu tabeli. Na przykład, jeśli tabela jest ustawiona na pionowy tryb pisania, wówczas wartości topi bottombędą zależne od kierunku tabeli.

Poniższe demo zawiera przycisk „przełącz”, który przełącza właściwość tabeli caption-sidemiędzy topi bottom, dzięki czemu możesz zobaczyć różnicę, używając tabeli z wieloma wierszami danych:

Zobacz
Demo pióra właściwości strony podpisu autorstwa CSS-Tricks (@ css-tricks)
w CodePen.

W następnym demo writing-modedla tabeli ustawiono vertical-rl. Jak pokazano, przełączając za pomocą przycisku, wartości topi bottomodnoszą się do trybu zapisu tabeli:

Zobacz
Demo pióra właściwości strony podpisu z różnymi trybami pisania według CSS-Tricks (@ css-tricks)
w CodePen.

Niestandardowe wartości tylko dla przeglądarki Firefox

Firefox od dawna wspierał i nadal obsługuje cztery niestandardowe wartości dla caption-side:

• left: umieszcza podpis po lewej stronie tabeli.
• right: umieszcza podpis po prawej stronie tabeli.
• top-outside: umieszcza podpis na górze tabeli, a jego wymiary są niezależne od tabeli
• bottom-outside: umieszcza podpis na dole tabeli, a jego wymiary są niezależne od tabeli

Poniższe demo działa tylko w przeglądarce Firefox i umożliwia użycie czterech przycisków do ustawienia różnych niestandardowych wartości:

Zobacz
demo Pen tylko dla Firefoksa właściwości strony napisów autorstwa CSS-Tricks (@ css-tricks)
na CodePen.

Nowe wartości standardowe

W najnowszych projektów specyfikacji CSS The caption-sidenieruchomość jest częścią CSS Properties logiczny poziom 1 i zawiera wartości block-start, block-end, inline-start, i inline-end. Dwa ostatnie odpowiadają wartościom niestandardowym lefti righti muszą być obsługiwane tylko przez programy użytkownika obsługujące te niestandardowe wartości.

Więcej informacji

• właściwość po stronie napisów w specyfikacji CSS2.1
• właściwość po stronie napisów w specyfikacji CSS2.2
• strona tytułowa we właściwościach logicznych CSS 1

Wsparcie przeglądarki

element, z tym samym skutkiem. Chociaż ta właściwość wpłynie na położenie pola podpisu jako całości (wartość podpisu jest obliczana jako), nie wpłynie to na wyrównanie tekstu wewnątrz pola. Tekst wewnątrz ramki można wyrównać za pomocą właściwości.

Chrom	Safari	Firefox	Opera	TO ZNACZY	Android	iOS
1+	1+	1+	9.2+	8+	2.1+	3.2+

Wsparcie w powyższej tabeli dotyczy podstawowego wsparcia dla normy topi bottomwartości. Firefox też dodatkowo wspiera niestandardowe left, right, top-outsidei bottom-outsidewartości. Nie ma wsparcia dla nowej przeglądarki block-start, block-end, inline-starti inline-endwartości.