Search code examples
javascripthtmlcsshtml-table

HTML Table header border moving (overlapped by bg color)

I've created this dummy table based on my real project. The issue I'm having is that the border on the Table Header is moving when the content of the cells changing (no-wrap) hence the border overlapped by the bg color of the cell (my understanding)

The header should be sticky so when the user is scrolling vertically the header is still there (on the demo might not work, but it's working on the real one) and I want the width to be dynamic as the content fits.

the border is missing

I use Edge Browser.

Fiddle demo link

function chunkArrayInGroups(arr, size) {
  var myArray = [];
  for (var i = 0; i < arr.length; i += size) {
    myArray.push(arr.slice(i, i + size));
  }
  return myArray;
}
var arrData = [
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
  "<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
"<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
"<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
"<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",
"<tr><td>XYZ-XYZ</td><td>210921</td><td>Lorem ipsum</td><td></td><td></td><td>Lorem ipsum</td><td></td><td>Loreeeeeeeem</td><td></td><td>BKSKALNWD</td><td>1/12/2024</td><td>1/12/2024</td><td>Released</td><td>WADKNLSW</td><td>Order Line</td><td>Lorem-2020-0000007</td><td>Lorem Ipsum Lorem Ipsum Lorem Ipsum</td><td></td><td></td><td>ASG-ASDW</td><td>Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem Loreeeeeeeem</td><td align='right'>174,270</td><td align='right'>174,270</td><td></td><td></td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td><td></td><td align='right'>140</td><td align='right'>0</td><td align='right'>0</td><td align='right'>0</td><td align='right'>174,270</td></tr>",  
];
dataChunk = chunkArrayInGroups(arrData, 10);

document.getElementById("index").innerHTML = "0";
document.getElementById("page").innerHTML = "1";
document.getElementById("rowof").innerHTML = "of " + dataChunk.length;
document.getElementById("tableBody").innerHTML = dataChunk[0].join(""); // first page
// Arrow onclick listener
$("#navContainer .arrow").on("click", function() {
  var index = parseInt($("#index").html());
  var currentPage = parseInt($("#page").html());
  var next = this.id === "next";
  var prev = this.id === "prev";

  if (index === 0 && prev) return; // end of prev
  else if (index === dataChunk.length - 1 && next) return; // end of next
  else if (prev) {
    index -= 1;
    $("#index").html(index.toString());
    currentPage -= 1;
    $("#page").html(currentPage.toString());
  } else {
    // next
    index += 1;
    $("#index").html(index.toString());
    currentPage += 1;
    $("#page").html(currentPage.toString());
  }
  // Insert to table body
  document.getElementById("tableBody").innerHTML = dataChunk[index].join("");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Calibri", sans-serif;
}

#navContainer {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

a {
  text-decoration: none;
}

.box-table-a {
  font-size: 12px;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.fixTableHead {
  overflow: auto;
  display: block;
}

.box-table-a th {
  font-size: 13px;
  padding-left: 3px;
  padding-right: 6px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  background-color: white;
  text-align: left;
  position: sticky;
  top: 0;
}

tbody td {
  padding-left: 3px;
  padding-right: 6px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  background-color: white;
  word-break: break-all;
  min-width: 150px;
  white-space: nowrap;
}

.box-table-a td:first-child,
.box-table-a th:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 1px solid black;
}

.box-table-a tr:hover td {
  background: #d0dafd;
}

.parentContainer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

#index,
#space {
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div class="fixTableHead">
    <table id="detail-grid" class="box-table-a">
      <thead id="tableHead">
        <tr>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
          <th>Lorem ipsum</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
  </div>
  <div id="navContainer">
    <a href="#" class="arrow" id="prev">⬅️</a>
    <span id="index"></span>
    <span id="page"></span>
    <span id="rowof"></span>
    <span id="space">1</span>
    <a href="#" class="arrow" id="next">➡️</a>
  </div>
</body>

</html>

Solution

  • Instead of position sticky to the th, add position sticky to thead.

    Corrected fiddle link: https://jsfiddle.net/wobcanzf/

    Just added below line

    #theadId {
  position: sticky;
}