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

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

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

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

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

<table class="first-col-fixed"> 
    <thead> 
        <tr><th></th></tr> 
    </thead>   
    <tbody> 
        <tr><td></td></tr> 
    </tbody> 
</table>

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

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

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

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

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

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

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

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

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

<style> 
    /* выравнить текст всех ячеек таблицы по центру, кроме первых */  
    table.first-col-fixed-add th:not(:first-child) p,
    table.first-col-fixed-add td:not(:first-child) p{
        text-align: center;  
    }
    /* выделить болдом текст в шапке и первой колонке*/ 
    table.first-col-fixed td:first-child p {
        font-weight: 500; 
    } 
</style> 
/* Содержание статьи */ 
<table class="first-col-fixed"> </table>

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

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

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

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

/*задать цвет фона фиксированной колонки*/
table.first-col-fixed td:first-child,
table.first-col-fixed th:first-child{
    background: #e9fcff !important;
}
/*задать цвет границы фиксированной колонки*/
table.first-col-fixed td:first-child:after,
table.first-col-fixed td:first-child:before,
table.first-col-fixed th:first-child:after,
table.first-col-fixed th:first-child:before{
    background: #c1e8ef !important;
}

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

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

/* запретить перенос слов для шапки таблицы */    
table.first-col-fixed thead tr th {
    white-space: nowrap;
    text-overflow: ellipsis;
}  
/* запретить перенос слов для первой колонки таблицы */    
table.first-col-fixed td:first-child {
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

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

/* выравнить по центру содержание каждого элемента ячейки таблицы, кроме первой колонки */    
table.first-col-fixed-add th:not(:first-child) p,
table.first-col-fixed-add td:not(:first-child) p{
    text-align: center;  
}

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

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

/* выделить болдом текст в первой строке и в первой колонке таблицы*/
table.first-col-fixed td:first-child p {
    font-weight: 500;
}

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

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

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