Модификации для Tilda
Магазин

Меняем ширину колонок таблицы в поле «Описание»

Если вставить таблицу в поле «Описание», Тильда может поделить её колонки поровну. В результате короткая колонка со временем или номером занимает половину таблицы, а длинный текст во второй колонке переносится на множество строк. Зададим колонкам нужные пропорции с помощью CSS, не затрагивая другие таблицы на странице.
<!-- Ширина колонок таблицы в конкретном блоке -->
<style>
#rec1234567890 .quill-table__table col:first-child {
    width: 25% !important;
}

#rec1234567890 .quill-table__table col:nth-child(2) {
    width: 75% !important;
}

@media screen and (max-width: 640px) {
    #rec1234567890 .quill-table__table col:first-child {
        width: 32% !important;
    }

    #rec1234567890 .quill-table__table col:nth-child(2) {
        width: 68% !important;
    }
}
</style>
Что можно менять:

  • ID блока — `#rec1234567890` нужно заменить на ID блока, внутри которого находится таблица. Найти его можно через инспектор браузера: F12 → кликнуть по нужному блоку → найти родительский `<div id="rec…">`.
  • Ширину колонок на компьютере — в примере первой колонке отдано 25%, второй — 75%. Значения можно изменить, но вместе они должны составлять 100%.
  • Ширину колонок на телефоне — внутри медиазапроса указано 32% и 68%. На узком экране первая колонка сделана немного шире, чтобы время или короткие подписи не переносились слишком часто.
  • Точку переключения мобильной версии — `640px` при необходимости можно заменить на другое значение.

Классы `.quill-table__table`, `col:first-child` и `col:nth-child (2)` менять не нужно: первый селектор находит таблицу, второй — её первую колонку, третий — вторую.

Куда вставлять: копируете код целиком → добавляете на нужную страницу HTML-блок T123 из категории «Другое» → вставляете код → сохраняете и публикуете страницу. Сам блок T123 можно поставить внизу страницы: визуально он ничего не добавит.

Как это работает: Тильда создаёт таблицу с фиксированной разметкой колонок, но в поле «Описание» не даёт настроить их ширину вручную. CSS переопределяет стандартные значения: первая колонка становится компактной, а вторая получает больше места для текста. Селектор `#rec1234567890` ограничивает действие кода одним конкретным блоком, поэтому остальные таблицы на странице сохранят прежний вид.

Если удалить блок и создать его заново, у него появится новый ID — тогда его нужно будет заменить и в коде.
Изменение ширины двух колонок таблицы в Tilda
Made on
Tilda