How to fix the name of the columns in the table when scrolling?

Question

Django

I have a dynamic table that is in a div, I set this div to scroll and when I start scrolling down the table, the column headings leave. Rows are added to the table via js. I would like the table headers to be fixed in place. I tried to move the column headings to a separate table, but then the columns did not match in size, and aligning through css in my case is complete shit.
html page:

<div class="container-news">
       <table class="container-news2"> 
       </table>
</div>

js code:

success:function(response){
     let news1 = document.getElementsByClassName("container-news2")[0]
     let news2 = document.getElementsByClassName("container-news2")[1]
      
      news1.innerHTML = "<tr>"+ "<th>"+"</th>" + "<th>"+"Источник"+"</th>" + "<th>"+"Дата"+"</th>" + "<th>"+"Заголовок"+"</th>" + "<th>"+"Тональность"+"</th>" + "<th>"+"Тема"+"</th>"+"</tr>"
      news2.innerHTML = ""
      response["header"].forEach(function(item, i){

      news1.innerHTML += "<tr>" + "<td class='lolu' style='background:url("+response["ico"][i]+") no-repeat center; background-size: 20px;'>"+"</td>" + "<td class='td-name-source'>"+response["name_source"][i]+"<br>"+"<a href='"+response["link_smi"][i]+"'>"+response["link_smi"][i]+"</a>"+"</td>" + "<td class='td-name-data'>"+response["data_news"][i]+"</td>" + "<td class='td-head' onclick='openNews(id);' style='cursor: pointer;' "+"id="+response["id"][i]+">"+ item+"</td>" +  "<td class='td-name-ton'>"+response['tonal'][i]+"</td>" +  "<td class='td-name-tem'>"+response['theme'][i]+"</td>" + "</tr>"
      news2.innerHTML += "<tr>" + "<td class='lolu' style='background:url("+response["ico"][i]+") no-repeat center; background-size: 20px;'>"+"</td>" + "<td class='td-name-source'>"+response["name_source"][i]+"<br>"+"<a href='"+response["link_smi"][i]+"'>"+response["link_smi"][i]+"</a>"+"</td>" + "<td class='td-name-data'>"+response["data_news"][i]+"</td>" + "<td class='td-head' onclick='openNews(id);' "+"id="+response["id"][i]+">"+ item+"</td>" + "<td class='td-name-ton'>"+response['tonal'][i]+"</td>" +  "<td class='td-name-tem'>"+response['theme'][i]+"</td>" + "</tr>"
      })
      console.log(response["header"])
      },

Answer 1

can be taken as a basis https://datatables.net/extensions/fixedheader/exam...

Answer 2

I think position: sticky on the th element will suit your task.
Here you can read more about it https://developer.mozilla.org/en/docs/Web/CSS/position
and check if it matches your browser range.