Как зафиксировать первую колонку таблицы в статьях базы знаний

Таблицы помогают систематизировать данные по нужным параметрам и удобно сравнивать их между собой, поэтому их нередко используют в статьях базы знаний Омнидеска. Но если в таблице много колонок или в ячейках большой объем данных, то после публикации статьи в таблицу добавляется горизонтальный скролл — так верстка не поедет, а читатель сможет просмотреть всех колонки.

При этом чаще всего в первой колонке перечислены параметры, по которым и систематизированы данные. Раньше при пролистывании таблицы эта колонка также прокручивалась и в итоге скрывалась, из-за чего пользователям было сложнее воспринимать информацию.

Доступ к группам	Александр Скворцов	Андрей Щербаков	Анжела Ким	Владимир Ермаков	Иван Поляков	Лиза Кравцова	Мария Бочарова	Надежда Скопьева	Пётр Алексеев	Степан Рогов	Татьяна Гаврилова	Эльдар Садыков	Яна Давтян
Общие вопросы	✅	✅	✅	✅	✅	✅	✅	❌	❌	✅	✅	✅	✅
Технические вопросы	✅	✅	❌	❌	✅	❌	❌	✅	❌	✅	❌	❌	❌
Вопросы по оплате	✅	✅	❌	❌	❌	❌	✅	✅	❌	❌	❌	❌	❌

Добавили специальный класс для таблиц, благодаря которому можно закрепить первую колонку, чтобы она отображалась даже при скролле. Чтобы зафиксировать первую колонку любой таблицы, добавьте в исходный код статьи к тегу table класс first-col-fixed:

Доступ к группам	Александр Скворцов	Андрей Щербаков	Анжела Ким	Владимир Ермаков	Иван Поляков	Лиза Кравцова	Мария Бочарова	Надежда Скопьева	Пётр Алексеев	Степан Рогов	Татьяна Гаврилова	Эльдар Садыков	Яна Давтян
Общие вопросы	✅	✅	✅	✅	✅	✅	✅	❌	❌	✅	✅	✅	✅
Технические вопросы	✅	✅	❌	❌	✅	❌	❌	✅	❌	✅	❌	❌	❌
Вопросы по оплате	✅	✅	❌	❌	❌	❌	✅	✅	❌	❌	❌	❌	❌

Чтобы было проще найти тег таблицы, в котором нужно прописать новый объект first-col-fixed, сделайте следующее:

• перейдите в исходный код статьи, кликнув на иконку «редактировать»;

• найдите открывающий тег таблицы, указав <table в поиске браузера (доступ к нему можно получить через CTRL+F);

• добавьте в тег table новый класс class="first-col-fixed", чтобы в итоге получилось <table class="first-col-fixed">.

Добавление стилей 

Стилизация текста, таблиц и другого содержания статей доступна в самом редакторе. К примеру, вы можете вручную выделить текст болдом или выравнять его по центру каждой ячейки. Но если ячеек много или в статье несколько таблиц, а вам нужно аналогичное отображение для каждого случая, на стилизацию уйдет много времени — придется отдельно редактировать каждую ячейку.

Если нужно применить стили к отдельной статье, укажите параметры объектов в тегах style, расположив их в самом начале html-кода статьи, до основного содержания.

Для стилизации часто используемых объектов можно задать глобальные стили. Один раз укажите нужные параметры в блоке кастомного CSS, а затем просто указывайте этот объект во всех статьях, к которым надо применить стиль.

Приведём несколько готовых примеров с использованием описанного выше класса first-col-fixed.

1) Как задать фон и границы для первой колонки таблицы

В интерфейсе редакторов готовой опции для управления цветом границ и фона ячейки нет, поэтому реализовать это можно либо через стили в исходном коде статьи, либо добавив их в кастомный CSS:

2) Как запретить перенос слов в ячейках шапки и первой колонки таблицы

Чтобы запретить перенос строк в ячейках, добавьте в кастомный CSS код из примера ниже:

3) Как выравнять по центру содержание каждой ячейки

Выравнивание по центру особенно удобно, когда у вас таблицы сравнения, и вы указываете только какие-то бинарные значения, к примеру, галочки / крестики, единицы / нули, количество звезд и т. п. Хотя эта опция есть в редакторе, если для вас это актуальный кейс, добавьте в настройки кастомного CSS этот параметр:

4) Как выделить болдом текст первой колонки таблицы

Добавьте в кастомной CSS следующий код:

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

Доступ к группам	Александр Скворцов	Андрей Щербаков	Анжела Ким	Владимир Ермаков	Иван Поляков	Лиза Кравцова	Мария Бочарова	Надежда Скопьева	Пётр Алексеев	Степан Рогов	Татьяна Гаврилова	Эльдар Садыков	Яна Давтян
Общие вопросы	✅	✅	✅	✅	✅	✅	✅	❌	❌	✅	✅	✅	✅
Технические вопросы	✅	✅	❌	❌	✅	❌	❌	✅	❌	✅	❌	❌	❌
Вопросы по оплате	✅	✅	❌	❌	❌	❌	✅	✅	❌	❌	❌	❌	❌

Статьи по теме