<style>
/* Левая граница первой ячейки таблицы */
#rec1382224761 .t431__td:first-child::before {
content: ""; /* пустой элемент для границы */
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute; /* позиционируем относительно родителя */
top: 0;
right: 0;
bottom: 0;
width: 1px; /* толщина границы — можно менять */
}
/* Правая граница первой ячейки таблицы */
#rec1382224761 .t431__td:first-child::after {
content: ""; /* пустой элемент для границы */
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute;
top: 0;
left: -1px;
bottom: 0;
width: 0px; /* толщина границы — можно менять */
}
/* Фиксируем первую колонку при скролле */
#rec1382224761 .t431 th:first-child,
#rec1382224761 .t431 .t431__td:first-child {
position: sticky;
left: 0; /* смещение от левого края */
}
/* Цвет фона нечётных рядов таблицы */
#rec1382224761 .t431__oddrow .t431__td {
background-color: #fbfbfb !important; /* можно менять на любой цвет */
}
/* Цвет фона чётных рядов таблицы */
#rec1382224761 .t431__evenrow .t431__td {
background-color: #F4F4F5 !important; /* можно менять на любой цвет */
}
/* Левая граница заголовка таблицы */
#rec1382224761 .t431__th::before {
content: "";
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0px; /* толщина границы */
}
/* Правая граница заголовка таблицы */
#rec1382224761 .t431__th::after {
content: "";
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute;
top: 0;
left: -1px;
bottom: 0;
width: 0px; /* толщина границы */
}
</style>
/* Левая граница первой ячейки таблицы */
#rec1382224761 .t431__td:first-child::before {
content: ""; /* пустой элемент для границы */
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute; /* позиционируем относительно родителя */
top: 0;
right: 0;
bottom: 0;
width: 1px; /* толщина границы — можно менять */
}
/* Правая граница первой ячейки таблицы */
#rec1382224761 .t431__td:first-child::after {
content: ""; /* пустой элемент для границы */
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute;
top: 0;
left: -1px;
bottom: 0;
width: 0px; /* толщина границы — можно менять */
}
/* Фиксируем первую колонку при скролле */
#rec1382224761 .t431 th:first-child,
#rec1382224761 .t431 .t431__td:first-child {
position: sticky;
left: 0; /* смещение от левого края */
}
/* Цвет фона нечётных рядов таблицы */
#rec1382224761 .t431__oddrow .t431__td {
background-color: #fbfbfb !important; /* можно менять на любой цвет */
}
/* Цвет фона чётных рядов таблицы */
#rec1382224761 .t431__evenrow .t431__td {
background-color: #F4F4F5 !important; /* можно менять на любой цвет */
}
/* Левая граница заголовка таблицы */
#rec1382224761 .t431__th::before {
content: "";
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0px; /* толщина границы */
}
/* Правая граница заголовка таблицы */
#rec1382224761 .t431__th::after {
content: "";
background: #E4E4E7 !important; /* цвет границы — можно менять */
position: absolute;
top: 0;
left: -1px;
bottom: 0;
width: 0px; /* толщина границы */
}
</style>
Настройки модификации
- Добавляем таблицу CL46
- Далее добавляем блок T123 и вставляем в него подготовленный код.
- Копируем номер id блока таблицы #rec и заполняем его в коде в необходимые секторы
- Дополнительно назначаем таблице цвета границ в коде.
Модификатор позволяет адаптировать таблицу в мобильной версии сайта.
Таблица CL46 в мобильной версии
Теги
Модификация
#
CSS
#
Текст
#
Слайдеры
#
не доступно
id:
Подключение скриптов
Базовые настройки
- Настраивать цвет левой и правой границы первой ячейки и заголовка (background в ::before и ::after).
- Менять толщину границы через свойство width в ::before и ::after.
- Фиксировать первую колонку при горизонтальном скролле с помощью position: sticky и смещения left.
- Настраивать цвет фона нечётных и чётных рядов таблицы через свойства background-color в .t431__oddrow и .t431__evenrow.
Технические советы
- Если меняете цвет или толщину границы, проверяйте корректное отображение в разных браузерах, особенно в Safari и Firefox.
- Для таблиц с динамическим контентом фиксированная колонка может перекрывать соседние элементы → лучше проверять адаптивность на мобильных.
- Можно комбинировать с дополнительными стилями таблицы (font-size, padding, border-radius) для полного контроля дизайна.
- При больших таблицах с множеством рядов нагрузка минимальна, но всё же проверяйте плавность скролла на слабых устройствах.
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!