caption-sideВластивість в CSS дозволяє визначити , де помістити HTML - х
елемент, що використовується в таблицях HTML. Ця властивість може також застосовуватися до будь-якого елемента, для displayвластивості якого встановлено значення caption-side.
table ( caption-side: top; )Цінності
top: за замовчуванням. Розміщує підпис у верхній частині таблиці.bottom: розміщує підпис внизу таблиці.inherit: вказує, що значення успадковується відcaption-sideзначення його батьківського елемента
caption-sideВластивість може бути застосоване або до
element or the
display table-caption text-align
Зверніть увагу, що наведені вище значення для caption-sideвідносяться до режиму запису таблиці. Наприклад, якщо таблиця встановлюється в режим вертикальної записи, то topі bottomзначення будуть по відношенню до напрямку столу.
Демонстрація нижче містить кнопку “перемикання”, яка перемикає caption-sideвластивості таблиці між topі bottom, так що ви можете побачити різницю, використовуючи таблицю з багатьма рядками даних:
Див.
Демонстраційну ручку властивості сторони субтитрів від CSS-Tricks (@ css-tricks)
на CodePen.
У наступній демонстрації writing-modeдля таблиці встановлено значення vertical-rl. Як було показано, перемикаючи з допомогою кнопки, topі bottomзначення в порівнянні з режимом листи столу:
Див.
Демонстраційну ручку властивості сторони субтитрів з різним режимом запису від CSS-Tricks (@ css-tricks)
на CodePen.
Нестандартні значення лише для Firefox
Firefox давно підтримує та підтримує чотири нестандартних значення для caption-side:
left: розміщує підпис ліворуч від таблиці.right: розміщує підпис праворуч від таблиці.top-outside: розміщує підпис у верхній частині таблиці, розміри яких не залежать від таблиціbottom-outside: розміщує підпис внизу таблиці, розміри яких не залежать від таблиці
Демонстрація нижче працює лише у Firefox і дозволяє використовувати чотири кнопки для встановлення різних нестандартних значень:
Див.
Демонстраційну версію Pen Firefox властивості сторони субтитрів від CSS-Tricks (@ css-tricks)
на CodePen.
Нові стандартні значення
В останніх проектах специфікації CSS, то caption-sideвластивість є частиною CSS Логічних властивостей 1 -го рівня і включає в себе значення block-start, block-end, inline-startі inline-end. Останні два відповідають нестандартним leftі rightзначенням, і вони повинні підтримуватися лише агентами користувачів, які підтримують ці нестандартні значення.
Більше інформації
- властивість субтитрів у специфікації CSS2.1
- властивість субтитрів у специфікації CSS2.2
- підпис у логічних властивостях CSS 1
Підтримка браузера
елемент, з однаковим ефектом. Незважаючи на те, що ця властивість впливатиме на положення вікна субтитрів у цілому (значення підпису обчислюється на), це не впливатиме на вирівнювання тексту всередині вікна. Текст всередині вікна може бути вирівняний за допомогою властивості.| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9,2+ | 8+ | 2.1+ | 3,2+ |
Підтримка у наведеній вище таблиці стосується базової підтримки стандарту topта bottomзначень. Firefox також додатково підтримує нестандартне left, right, top-outsideі bottom-outsideзначення. Там немає підтримки браузера для нової block-start, block-end, inline-startі inline-endцінності.