How prevent moving of tables header while scrolling?

The header little moving up and down while vertical scrolling. I can`t use CSS sticky bacause my parent has horizintal sroll. Keep position of the header on the top of page while scrolling page (vertically).

Is it possible to do it?

const table = document.querySelector('.table');
const header = document.querySelector('.table header');

window.addEventListener('scroll', function() {
  const tableRect = table.getBoundingClientRect();
  const headerRect = header.getBoundingClientRect();

  // Проверяем, когда шапка должна прилипнуть к верхней части экрана
  if (tableRect.top < 0 && tableRect.bottom > headerRect.height) {
    const topOffset = Math.abs(tableRect.top);
    header.style.transform = `translateY(${topOffset}px)`; // Используем translateY для плавного перемещения
    //header.classList.add('header-fixed'); // Добавляем класс при фиксации
  } else {
    header.style.transform = `translateY(0px)`; // Сброс перемещения
  //  header.classList.remove('header-fixed'); // Убираем класс, если шапка не фиксируется
  }
});
.mobile-container {
 background-color: ;
  width: 30%;
   border: 1px solid red;
  display:flex;
  flex-direction: column;
    align-items: center;
  position:relative;
}

h1 {
  text-align: center;
}

.table {
  display: grid; /* если поменять на table пропадает горизонтальный скрол, зато шапка таблицы фиксируется наверху */
  overflow-x: auto;
  border: 1px solid #DCDCDC;
  border-radius: 0.5rem;
  width: 90%;
box-sizing: border-box;
  position: relative;

}



.table header {
  height: 2.625rem;
   display: grid;
  padding: 0.6875rem 1.25rem;
  color: #8C8C8C;
  border-bottom: 1px solid #DCDCDC;
  box-sizing: border-box;
  background: #FAFAFA;
  grid-template-columns: repeat(2, 15rem) repeat(2, 5rem);
  white-space: nowrap;

      column-gap: 1rem;
 
  z-index:10;
  top: 0;
  position: sticky; /* Используем позицию sticky */

  width: 100%;
  
 /*transition: transform 0.16s linear, opacity 0.16s linear; */


  div:nth-child(1) {
        display: none;
      }
  
}

.table main {
  > div {
    display: grid;
      grid-template-columns: repeat(2, 15rem) 6rem;
      row-gap: 0.25rem;
      column-gap: 1rem;
      padding: 0.5rem 1.25rem;
border: 1px solid #DCDCDC;
    box-sizing: border-box;
    
    div:first-child {
        grid-column: 1 / -1;
        position: sticky;
        left: 1.25rem;
        z-index: 1;
        white-space: nowrap;
        width: min-content;
      }
    
  }
  
  
}
<div class="mobile-container">
  <h1>Мобильная версия</h1>

<div class="table">
 
  <header>
    <div>Название</div>
    <div>Описание</div>
    <div>Цена</div>
    <div>Количество</div>
  </header>
   
  <main>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>

    <main>
      </div>
    
    </div>