Не оборачивай td в div внутри tr.
Как вариант, убери все дивы, что написал и в JS тебе потребуется всего один обработчик на самой таблице:

const table = document.querySelector("table");
table.addEventListener("click", (e) => {
  if (e.target.tagName === "TD" && e.target.parentElement.children[0] !== e.target) {
    console.log('Тут твой код');
  }
});

Тут мы проверяем, что target клика пришелся на один из TD, а затем проверяем, что это не первый TD в своем родителе.

Воспользуйся библиотекой GSAP - https://greensock.com/ и подключи ее плагин ScrollTrigger. Оба инструмента бесплатные.
Пример нужной тебе реализации есть в официальных примерах здесь.
Параметр, который тебя интересует и влияет на прогресс анимации, это "scrub". Саму полосу можешь анимировать как и в примере с помощью scaleX (только не забудь указать привязку transformOrigin: 'left center'.

Для более сложных вещей, можешь найти в документации ScrollTrigger свойство onUpdate, где ты можешь напрямую отслеживать ход анимации.