I've made a program that reads the variable "data" and puts all the values on a table. Everything is working great except for the header. I call .table-sticky when I define myTable in the tag, but the header won't stick. Does anybody know why?
.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>The problem is because of how you are assigning attribute values inside the script tags i.e, without quotation marks
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>";
Here the table class has two value table and table-sticky but since you have not used any quotation marks, the browser interprets those values very differently as explained here StackOverFlow Question. The second class is interpreted as another attribute instead of a value.
Do it like this,
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>';