Документерра: руководство пользователя

Конфигурация стилей таблиц

Таблицы часто используются в документации как отличный способ обобщения информации. При объединении в виде таблицы огромные объемы данных становятся более понятными.

В системе Документерра таблицы можно добавлять на страницу на вкладке Вставка в верхней панели в Режиме «Дизайн».

После нажатия на элемент Вставить таблицу появится диалоговое окно. В этом диалоговом окне можно настроить таблицу в соответствии со своими потребностями, указав количество столбцов, строк, настроив макет и т.д.

Диалоговое окно «Вставка таблицы»

Вы можете мгновенно применить стиль к своей таблице с помощью опций Специальных возможностей.

Чекбокс «Специальные возможности» в диалоговом окне «Вставка таблицы»

Здесь вы можете задать первую строку или первую строку и первый столбец более заметными (для удобства навигации по таблице), выделив их цветом. На уровне кода эти элементы изменяются с td на th и, таким образом, становятся заголовками таблиц. На скриншоте ниже показано, как это сделать для обоих элементов.

Выберите вариант «Оба» в раскрывающемся списке «Шапки таблиц» в настройках специальных возможностей.

Результат выглядит следующим образом:

Таблица с шапками в режиме редактирования

	Примечание
Цвет этих шапок взят из

Стилизация таблиц с помощью CSS

В системе Документерра все таблицы, добавленные на страницы справки, автоматически получают класс CSS — CHTable. Этот класс по умолчанию применяется ко всем таблицам.

Если вы решили изменить внешний вид таблиц, просто измените CSS-стили для класса ChTable в файле CSS-стилей, используемом в вашем текущем проекте.

Если вы хотите создать свой собственный CSS-класс для таблиц, просто сделайте это в Редакторе CSS, а затем при добавлении таблицы в документацию выберите этот вновь созданный класс из списка классов в диалоговом окне Вставка таблицы.

Укажите CSS-класс таблицы в настройках специальных возможностей

Чтобы отредактировать CSS-файл таблицы, выполните следующие действия:

Перейдите в раздел Стили на вкладке Домашняя страница в верхней панели в Режиме «Дизайн» и нажмите Открыть Style.css для редактирования... . Откроется редактор CSS.
Найдите класс ChTable в этом файле. Для удобства вы можете использовать сочетание клавиш Ctrl+F и ввести имя класса.
Отредактируйте CSS-код.

Ниже вы найдете несколько примеров выполнения основных задач по стилизации таблиц в системе Документерра с помощью CSS.

Основные задачи по стилизации

Изменение стиля шапки

Вот первоначальный внешний вид нашей таблицы по умолчанию:

Пример таблицы в режиме редактирования

Чтобы изменить стиль шапки таблицы, нам нужно найти класс ChTable в коде, как описано выше. Затем нам нужно найти селектор th, поскольку он определяет шапки в таблице.

селектор в файле CSS" class="screenshot-effects" style="">

Теперь можно изменить свойство фона, добавив другой цвет по собственному выбору. Этот цвет фона будет использоваться для шапок во всех таблицах с классом ChTable по умолчанию. Давайте также увеличим размер шрифта .

tag" class="screenshot-effects" style="">

Сохраните изменения и перезагрузите страницу справки, чтобы увидеть результаты:

Изменение стиля четных и нечетных строк

Если вам нужно изменить стиль строк, найдите эту строку в коде -. CHTable tr:nth-child(even). Ее изменение повлияет на стиль четных строк. По умолчанию четные строки окрашены в серый цвет.

Найдите код в файле CSS, определяющий стиль строк

Мы сделаем их зелеными, изменив #efefef на #eeffcc:

Измените правила CSS, определяющие стиль строк таблицы

Сохраните изменения, перезагрузите страницу, и вот результат:

Таблица после изменений в режиме редактирования

	Совет
Если вам нужно изменить стиль нечетных строк, добавьте свойство background в селектор . CHTable и укажите нужный цвет.

	Примечание
Обратите внимание, что стили четных и нечетных строк, примененные с помощью селектора nth-child, не будут работать в печатных форматах, таких как PDF или Microsoft Word.

Предотвращение разрывов строк в шапках таблиц

Когда первый столбец играет роль шапки таблицы, он может содержать важную информацию, такую как названия компаний, названия продуктов и т.д. Часто такая информация должна рассматриваться как одна строка без разрывов. Взгляните на этот пример:

Ячейка таблицы, которая должна состоять из одной строки без разрывов

Чтобы исправить это, просто добавьте следующую строку (. CHTable tr th:nth-child(1) {white-space: nowrap;}) к вашему CSS-коду.

	Совет
Если вы используете собственный CSS-класс для таблиц, просто введите его вместо . CHTable в этой строке. Например, .myTable tr th:nth-child(1) {white-space: nowrap;}.

Добавьте специальные CSS-правила в CSS-файл

Сохраните изменения, перезагрузите страницу. В первом столбце не будет разрывов строк, остальные столбцы останутся одинаковыми по размеру, но шрифт будет меньше.

Таблица с изменениями в режиме редактирования

Вот таким образом редактируются стили таблиц в системе Документерра. Если у вас есть какие-либо вопросы, задайте их ниже в разделе комментариев.

Применение стилей шаблонов к импортированным проектам Использование собственных шрифтов