сторона-заголовка
Свойство caption-side CSS размещает содержимое <caption> таблицы на указанной стороне. Значения относятся к writing-mode таблицы.
Попробуйте
Синтаксис
/* Directional values */ caption-side: top; caption-side: bottom; /* Global values */ caption-side: inherit; caption-side: initial; caption-side: revert; caption-side: revert-layer; caption-side: unset;
Свойство caption-side задаётся одним из ключевых значений, перечисленных ниже.
Значения
top-
Блок заголовка должен быть расположен на стороне начала блока таблицы.
bottom-
Блок заголовка должен быть расположен на стороне конца блока таблицы.
Примечание: Модуль логический свойства и значения CSS определяет два логических значения, inline-start и inline-end, для размещения блока заголовка на границе начала и конца строки таблицы соответственно. Эти значения не поддерживаются ни в одном браузере.
Формальное определение
| Начальное значение | top |
|---|---|
| Применимо к | элементам table-caption |
| Наследуется | да |
| Вычисляемое значение | как указано |
| Тип анимации | дискретный |
Формальный синтаксис
caption-side =
top |
bottom
Примеры
Установка заголовков сверху и снизу
HTML
<table class="top">
<caption>
Caption ABOVE the table
</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
<br />
<table class="bottom">
<caption>
Caption BELOW the table
</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
CSS
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
Результат
Спецификации
| Спецификация |
|---|
| Спецификация уровня 2 пересмотра 2 (CSS 2.2) # propdef-caption-side |
| CSS логические свойства и значения уровня 1 # caption-side |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
caption-side |
1 | 12 | 1 | 4 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
bottom |
≤80 | 80 | ≤72 | 67 | ≤13.1 | 80 | 79 | 57 | ≤13.4 | 13.0 | 80 |
bottom-outside |
Нет | Нет | 1–87 | Нет | предварительный просмотр | Нет | 4–87 | Нет | Нет | Нет | Нет |
left |
Нет | Нет | 1–87 | Нет | ≤13.1–17 | Нет | 4–87 | Нет | ≤13.4–17 | Нет | Нет |
right |
Нет | Нет | 1–87 | Нет | ≤13.1–17 | Нет | 4–87 | Нет | ≤13.4–17 | Нет | Нет |
top |
≤80 | 80 | ≤72 | 67 | ≤13.1 | 80 | 79 | 57 | ≤13.4 | 13.0 | 80 |
top-outside |
Нет | Нет | 1–87 | Нет | предварительный просмотр | Нет | 4–87 | Нет | Нет | Нет | Нет |
writing-mode_relative_values |
Нет | Нет | 42 | Нет | Нет | Нет | 42 | Нет | Нет | Нет | Нет |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side