Some parts of dynamic table not shown in html page
I want to make a dynamic data table by using js on the html page, but I have difficulty with drawing a table. Problem is the "dataTable" area starts from top of the browser so I cannot found the 1st ~ 4nd rows despite using overflow-y scroll. How can I solve this problem?
var logTable = new Array(); var html = ""; for (i = 0; i < 20; i++) logTable.push({ a: '127.12', b: '129.84', c: '89.23', d: '84', e: '12' }); for (key in logTable) { html += '<tr>'; html += '<td>' + logTable[key].a + '</td>'; html += '<td>' + logTable[key].b + '</td>'; html += '<td>' + logTable[key].c + '</td>'; html += '<td>' + logTable[key].d + '</td>'; html += '<td>' + logTable[key].e + '</td>'; html += '</tr>'; } $("#tableCreate").empty(); $("#tableCreate").append(html);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead id="tableHead"> <tr> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> </tr> </thead> </table> <table id="dataTable"> <div id="tableScroll"> <tbody id="tableCreate"> <!-- js table create code --> </tbody> </div> </table>
