I have a table with nth number of columns. I want to hide particular column when total column width exceed with screen width.

below is design

below is code

 let tableHeaderColumnList = $(".table-header__row")
  .children();

$(window).resize(function () {
  let screenWidth = window.innerWidth;
  let totalColumnWidth = 0;
  console.log(screenWidth);
  setTimeout(() => {
    for (let i = 0; i < tableHeaderColumnList.length; i++) {
      totalColumnWidth += tableHeaderColumnList[i].offsetWidth;
      if (screenWidth < totalColumnWidth) {
        $(tableHeaderColumnList[i]).addClass("hide-cell");
      } else {
        $(tableHeaderColumnList[i]).removeClass("hide-cell");
      }
    }
  }, 1000);
});

above code is not working properly