I work with a table, which is built dynamically, and I have a problem.
The table is scrollable, and columns and row are built dynamically, and I want to fix header so just table body is scrollable.
I tried to use some methods but it does not work for me:
var templateName = ["Name", "Value", "Upper", "Lower", "Description"]; var mockData = [{ "Name": "Working heads quantity", "Value": "12", "Upper": "-", "Lower": "-", "New col": "test", "Description": "Some Description here" }, { "Name": "Upper thread tension", "Value": "-", "Upper": "210 +/- 10", "Lower": "20 +/- 5", "Description": "Some Description here" }, { "Name": "Botom thread tension", "Value": "-", "Upper": "55 +/- 5", "Lower": "55 +/- 5", "Description": "Some Description here" }, { "Name": "Frames per 1 spool", "Value": "5", "Upper": "-", "Lower": "-", "Description": "Some Description here" }, { "Name": "Type", "Value": "1", "Upper": "-", "Lower": "-", "Description": "Some Description here" }, { "Name": "Speed", "Value": "300", "Upper": "-", "Lower": "-", "Description": "Some Description here" }, { "Name": "Tracing", "Value": "64", "Upper": "-", "Lower": "-", "Description": "Some Description here" }, { "Name": "Tracing", "Value": "64", "Upper": "-", "Lower": "-", "Description": "Some Description here" }, { "Name": "Tracing", "Value": "64", "Upper": "-", "Lower": "-", "Description": "Some Description here" } ]; function buildHtmlTable() { var columns = addAllColumnHeaders(mockData, '#parameter-table'); for (var i = 0; i < mockData.length; i++) { var row$ = $('<tr/>'); for (var colIndex = 0; colIndex < columns.length; colIndex++) { var cellValue = mockData[i][columns[colIndex]]; if (cellValue == null) cellValue = ""; row$.append($('<td/>').html(cellValue)); } $('#parameter-table').append(row$); } } function addAllColumnHeaders(data, selector) { var columnSet = []; var headerTr$ = $('<tr/>'); for (var i = 0; i < data.length; i++) { var rowHash = data[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1) { columnSet.push(key); headerTr$.append($('<th/>').html(key)); } } } $(selector).append(headerTr$); return columnSet; } buildHtmlTable();#scrolltable { margin-top: 10px; width: 100%; height: 500px; overflow: auto; overflow-x: hidden; overflow-y: scroll; } #scrolltable th div { position: absolute; margin-top: -20px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="scrolltable"> <table id="parameter-table"> <thead id="table-header-parameter" class="header"> </thead> <tbody id="table-body-data"></tbody> </table> </div>So i wiil try to explain one more time.
I build table from jQuery script, and header build like row, and maybe because lot of scripts not working for me.
