HTML Table header border moving (overlapped by bg color)

Kenji
June 3, 2024
89 views
3 votes
3 Answers

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.

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>

Answers

- SudiptoRoy
- June 3, 2024 at 10:52 am
- 0 votes
0
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;
}
```
Login or Signup to reply.

- PriyankDalal
- June 3, 2024 at 11:19 am
- 0 votes
0
Additionally, You need to provide height to Table wrapper; in your case you need to provide height to fixTableHead div.

Login or Signup to reply.



        * {
          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; THIS WAS THE ISSUE No need to add scroll option*/ 
          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;
        }



No need to add the "overflow:auto" to a div which obviously contain table elements which are going to overflow, it is already handled. Doing this even the thead which is sticky becomes the part of that overflow. But this will work if the table data overflows from the viewport.
So, if you need to provide scrolling option for your table data internally, you should set limited height which will trigger the overflow, and scroll bar will be visible, then you will see the sticking effect.


.fixTableHead {
   height: 100px;
   overflow: auto;
   display: block;
}

Please signup or login to give your own answer.

Click here to cancel reply.