Сторона подписи - CSS-хитрости

Anonim

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, поэтому вы можете увидеть разницу, используя таблицу с множеством строк данных:

См.
Демонстрацию Pen для свойства caption-side от CSS-Tricks (@ css-tricks)
на CodePen.

В следующей демонстрации writing-modeдля стола установлено значение vertical-rl. Как было показано, переключая с помощью кнопки, topи bottomзначение по сравнению с режимом письма стола:

См.
Демонстрацию Pen для свойства caption-side с другим режимом письма с помощью CSS-Tricks (@ css-tricks)
на CodePen.

Нестандартные значения только для Firefox

Firefox уже давно поддерживает и поддерживает четыре нестандартных значения для caption-side:

  • left: размещает заголовок слева от таблицы.
  • right: размещает заголовок справа от таблицы.
  • top-outside: размещает заголовок вверху таблицы, причем его размеры не зависят от таблицы
  • bottom-outside: размещает заголовок внизу таблицы, причем его размеры не зависят от таблицы

Приведенная ниже демонстрация работает только в Firefox и позволяет использовать четыре кнопки для установки различных нестандартных значений:

См.
Демонстрацию свойства caption-side для Pen Firefox от CSS-Tricks (@ css-tricks)
на CodePen.

Новые стандартные значения

В последних проектах спецификации CSS, то caption-sideсвойство является частью CSS Логических свойств 1 -го уровня и включает в себя значение block-start, block-end, inline-startи inline-end. Два последние соответствуют нестандартным leftи rightзначениям, а только должны поддерживаться пользовательскими агентами , которые поддерживают эти нестандартные значения.

Дополнительная информация

  • свойство caption-side в спецификации CSS2.1
  • свойство caption-side в спецификации CSS2.2
  • caption-side в логических свойствах CSS 1

Поддержка браузера

элемент, с тем же эффектом. Хотя это свойство влияет на положение поля заголовка в целом (значение заголовка вычисляется), оно не влияет на выравнивание текста внутри поля. Текст внутри поля можно выровнять с помощью свойства.
Хром Сафари Fire Fox Опера 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ценности.