Spec-Zone.ru › CSS

сторона-заголовка

Свойство 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 Нет Нет Нет Нет

См. также

  • <caption>
  • Модуль CSS table
  • Модуль CSS логических свойств и значений

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API