Hice un programa que lee la variable "datos" y pone todos los valores en una tabla. Todo funciona muy bien, excepto el encabezado. Llamo a .table-sticky cuando defino myTable en la etiqueta, pero el encabezado no se pega. ¿Alguien sabe por qué?
.table-sticky-container { top: 0; position: absolute; height: 200px; width: 400px; margin-top: 410px; margin-left: 803px; overflow-y: scroll; border: 2px solid grey; } .table-sticky th { position: -webkit-sticky; position: sticky; top: 0; } <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> <div class="table-sticky-container"> <div id="container"></div> <script> var data = ["NuggetCraft", "8:30", "8:45", "ChickenCraft", "9:30", "9:45", "MoneyCraft", "10:30", "10:45", "SpaceCraft", "11:30", "11:45", "NachumCraft", "12:30", "12:45", "SpecialCraft", "13:30", "13:45","BinkleCraft", "14:30", "14:45", "SchnitzelCraft", "15:30", "15:45", "CoolCraft", "16:30", "16:45", "PianoCraft", "17:30", "17:45", "QuadCraft", "18:30", "18:45", "CalfCraft", "19:30", "19:45"]; var myTable = "<table class=table table-sticky><thead class=thead-light><tr><th>Name</th><th>Time in</th><th>Time out</th></tr></thead><tbody><tr>"; var perRow = 3; data.forEach((value, i) => { myTable += `<td>${value}</td>`; var next = i + 1; if (next % perRow == 0 && next != data.length) { myTable += "</tr><tr>"; } }); myTable += "</tr></tbody></table>"; document.getElementById("container").innerHTML = myTable; </script> </div>El problema se debe a cómo está asignando valores de atributo dentro de las etiquetas de secuencia de comandos , es decir, sin comillas
var myTable = "<table class=table table-sticky><thead class=thead-light><tr><th>Name</th><th>Time in</th><th>Time out</th></tr></thead><tbody><tr>";Aquí, la clase de tabla tiene dos valores, tabla y tabla pegajosa, pero como no ha usado comillas, el navegador interpreta esos valores de manera muy diferente, como se explica aquí Pregunta de StackOverFlow . La segunda clase se interpreta como otro atributo en lugar de un valor.
Hazlo asi,
var myTable = '<table class="table table-sticky"><thead class="thead-light"><tr><th>Name</th><th>Time in</th><th>Time out</th></tr></thead><tbody><tr>';