Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как объединить ячейки в таблице CL46 в Tilda
/ПОСЛЕ
/ДО
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Объединяем ячейки в таблице CL46
Фрагмент видео
Посмотреть видео в личном кабинете ►

Как объединить ячейки в таблице CL46 в Tilda

1
Создали таблицу CL46, с учётом смещения ячеек при объединении
(в примере не использовалась шапка)
2
Добавили код в блок Другое - Т123
В коде указали ID нужной таблицы
let cl46 = $('#rec381682611');

Координаты ячейки, направление объединения и кол-во объединяемых ячеек
[1,1,'rowspan',2],
[1,2,'rowspan',2],
[1,3,'colspan',3],
[1,4,'rowspan',2],
[7,1,'colspan',2],
[8,1,'colspan',2],
[9,1,'colspan',2]
Библиотека для примера

<script>
$(document).ready(function(){
let cl46 = $('#rec381682611');
let cellMap = [
    //строка, ячейка, направление,кол-во ячеек к объединению
    [1,1,'rowspan',2],
    [1,2,'rowspan',2],
    [1,3,'colspan',3],
    [1,4,'rowspan',2],
    [7,1,'colspan',2],
    [7,5,'rowspan',3],
    [8,1,'colspan',2],
    [9,1,'colspan',2]
    
];
    
if(cl46.length){
    setTimeout(function(){
        let direction = '';
        $.each(cellMap,function(index,value){
            cl46.find('tr:eq('+(value[0]-1)+') [class^="t431_"]:eq('+(value[1]-1)+')').attr(value[2], value[3]); 
        });
        cl46.find('th').each(function(){
            if( $(this).text()=="" ) $(this).remove();
        });
        cl46.find('td').each(function(){
            if( $(this).text()=="" ) $(this).remove();
        });
    }, 500);
};
});    
</script>
Стили из этого примера

<style>
td.t431__td {
    vertical-align: middle !important;
}    
tbody.t431__tbody tr:nth-child(1), tbody.t431__tbody tr:nth-child(2) {
    background-color: #e2e2e2;
}
tbody.t431__tbody tr:nth-child(1){
    border:2px solid #a5a5a5;
    border-bottom:0px;
}
tbody.t431__tbody tr:nth-child(2){
    border:2px solid #a5a5a5;
    border-top:0px;
}
tbody.t431__tbody tr:nth-child(1) td{
    border-color: #a5a5a5  !important;
}
tbody.t431__tbody tr:nth-child(2) td{
    border-color: #a5a5a5  !important;
}
</style>
Made on
Tilda