Как зафиксировать название столбцов в таблице при скроле?

Question

[Александр]

У меня есть динамическая таблица которая находится в div, я задал этому div скрол и когда я начинаю листать таблицу вниз заголовки столбцов уезжают. Строки в таблицу добавляются через js. Я бы хотел заголовки таблицы зафиксировать на месте. Пробовал вынести заголовки колонок в отдельную таблицу, но тогда колонки по размерам не совпадали, а выравнивать через css в моем случае говно полное.
Страница html:

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

Код js:

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

[Юрий Пузыня]

Думаю для вашей задачи подойдет position: sticky на th элементе.

Вот здесь можно почитать про него подробнее https://developer.mozilla.org/ru/docs/Web/CSS/position

и проверить на соответствие вашему диапазону браузеров.

Comments

[parmetra]

Спасибо! Ваша подсказка по использованию sticky помогла.

Answer 2

[Антон Шаманов]

можно взять за основу https://datatables.net/extensions/fixedheader/exam...

Comments

[Александр]

Спасибо большое, годная тема)))

[Антон Шаманов]

poshuriku, я бы на твоем месте использовал не только тему, но и js - эта библиотека умеет загружать/форматировать табличные данные + плагины для пагинации, сортировки, поиска и редактирования данных