В статьях вы можете предоставить исчерпывающую информацию о продуктах, сервисе или вашей команде. Таблицы как раз позволяют быстро и легко просмотреть данные. Но если колонок много, читателю сложно понять, к чему относится конкретная ячейка.
Чтобы исправить это, добавьте к таблице класс first-col-fixed:
<table class="first-col-fixed">
<tbody>
<tr><td></td></tr>
</tbody>
</table>
В результате первая колонка будет отображаться всегда, перекрывая последующую колокну:
Доступ к группам |
Александр Скворцов |
Андрей Щербаков |
Анжела Ким |
Владимир Ермаков |
Иван Поляков |
Лиза Кравцова |
Мария Бочарова |
Надежда Скопьева |
Пётр Алексеев |
Степан Рогов |
Татьяна Гаврилова |
Эльдар Садыков |
Яна Давтян |
Линия 1 |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
❌ |
❌ |
✅ |
✅ |
✅ |
✅ |
Линия 2 |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
❌ |
❌ |
✅ |
❌ |
✅ |
❌ |
Линия 3 |
✅ |
✅ |
❌ |
✅ |
✅ |
✅ |
✅ |
❌ |
❌ |
✅ |
❌ |
✅ |
❌ |
Технические вопросы |
✅ |
✅ |
❌ |
❌ |
✅ |
❌ |
❌ |
✅ |
❌ |
✅ |
❌ |
❌ |
❌ |
Вопросы по оплате |
✅ |
✅ |
❌ |
✅ |
✅ |
✅ |
❌ |
✅ |
❌ |
❌ |
❌ |
❌ |
❌ |
Юридические вопросы |
✅ |
✅ |
❌ |
✅ |
✅ |
❌ |
❌ |
❌ |
✅ |
❌ |
❌ |
❌ |
❌ |
Руководство |
✅ |
✅ |
❌ |
❌ |
❌ |
❌ |
✅ |
✅ |
❌ |
❌ |
❌ |
❌ |
❌ |
Чтобы было проще найти тег таблицы, перейдите в исходный код статьи по пути: аккаунт администратора → раздел «Центр поддержки» → подраздел «Статьи» → иконка «редактировать» → режим исходного кода → найдите тег <table через поиск в браузере (CTRL+F) → добавьте в тег class="first-col-fixed", чтобы в итоге получилось <table class="first-col-fixed">.
Дополнительная кастомизация таблицы
С помощью кастомного CSS, который указывается по пути: аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «Кастомный CSS», можете прописать дополнительные стили для таблицы, обращаясь к объекту, указанному ранее.
1. Задайте цвет первой колонки, правой и левой границы:
/*задать цвет фона колонки*/
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. Запретите перенос слов в шапке таблицы и первой колонке (как мы сделали для имён сотрудников в примере выше):
/* запрещаем перенос слов для шапки таблицы */
table.first-col-fixed tr:first-child td {
white-space: nowrap;
text-overflow: ellipsis;
}
/* запрещаем перенос слов для первой колонки таблицы */
table.first-col-fixed td:first-child {
white-space: nowrap;
text-overflow: ellipsis;
}
3. Автоматически выравнивайте по центру содержание каждой ячейки:
/* выравниваем по центру содержание каждого элемента ячейки таблицы */
table.first-col-fixed td {
text-align: center;
}
4. Выделите болдом все содержание в шапке и первой колонки таблицы:
/* выделяем болдом текст в шапке и первой колонке*/
table.first-col-fixed td:first-child p,
table.first.col-fixed tr:first-child p {
font-weight: 500;
}
В результате таких правок таблица будет выглядеть так:
Доступ к группам |
Александр Скворцов |
Андрей Щербаков |
Анжела Ким |
Владимир Ермаков |
Иван Поляков |
Лиза Кравцова |
Мария Бочарова |
Надежда Скопьева |
Пётр Алексеев |
Степан Рогов |
Татьяна Гаврилова |
Эльдар Садыков |
Яна Давтян |
Линия 1 |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
❌ |
❌ |
✅ |
✅ |
✅ |
✅ |
Линия 2 |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
✅ |
❌ |
❌ |
✅ |
❌ |
✅ |
❌ |
Линия 3 |
✅ |
✅ |
❌ |
✅ |
✅ |
✅ |
✅ |
❌ |
❌ |
✅ |
❌ |
✅ |
❌ |
Технические вопросы |
✅ |
✅ |
❌ |
❌ |
✅ |
❌ |
❌ |
✅ |
❌ |
✅ |
❌ |
❌ |
❌ |
Вопросы по оплате |
✅ |
✅ |
❌ |
✅ |
✅ |
✅ |
❌ |
✅ |
❌ |
❌ |
❌ |
❌ |
❌ |
Юридические вопросы |
✅ |
✅ |
❌ |
✅ |
✅ |
❌ |
❌ |
❌ |
✅ |
❌ |
❌ |
❌ |
❌ |
Руководство |
✅ |
✅ |
❌ |
❌ |
❌ |
❌ |
✅ |
✅ |
❌ |
❌ |
❌ |
❌ |
❌ |