0

I have a manual html table in lwc as hown in this Playground

the goal is to fix the first 3 columns and first header row and with the below CSS and it is working as expected (In [playground it fixed 1st column only but in real time it fixed first 3)

.tableFixHead {
  overflow: auto;
  height: 450px;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

td:first-child,
th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}
td:nth-child(2),
th:nth-child(2) {
  position: sticky;
  left: 62px;
  z-index: 1;
  background-color: white;
}
td:nth-child(3),
th:nth-child(3) {
  position: sticky;
  left: 138px;
  z-index: 1;
  background-color: white;
}
.tableFixHead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
}
th:first-child,
th:nth-child(2),
th:nth-child(3) {
  z-index: 50000;
}

but the problem comes when I do horizontal scroll the first 3 headers should remain at the top but instead rest of the header are coming at the top if you click on playground and scroll the horizontal scroll bar then than first header opportunity Name should remain fixed

here in the playground vertical scroll is also not working as expected but in my real project it is working fine the only problem is on horizontal scroll if table data is fixed for first 3 columns then table header should remain fixed for the same, please confirm what I am missing.

update

if I remove the below CSS class

.tableFixHead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
}

then horizontal scroll works as expected but in vertical scroll the header doesn't remain fix.

7
  • 1
    by what I can see in the playground as of now, your thead's first column is being overlapped, so you can add thead tr:first-child th:first-child { z-index: 1000; } there Mar 12, 2020 at 7:30
  • thank you so much, it fixed the first header but thead tr:nth-child(2) th:nth-child(2) { z-index: 1000; } didn't fixed the 2nd header, could you please suggest how to fix the 2nd one?
    – gs650x
    Mar 12, 2020 at 7:40
  • z-index is not for fixing, it was just for the overlapping, need to figure out something else for that Mar 12, 2020 at 8:04
  • I have updated my question, please suggest
    – gs650x
    Mar 12, 2020 at 9:02
  • what you actually need to do is, you need to fix the width of first column and second column left css parameter should be equal to the width of first column and need to take care of z-index too! Mar 12, 2020 at 9:09

1 Answer 1

1

updating <th style="z-index: 4;"> at html level solved the problem

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .