Box Shadow disappears from the table header after scrolling CSS

Issue

I have box shadow on thead element, but it disappears after scrolling.

CSS:

thead {
  box-shadow: 0 5px 10px #e1e5ee;
}

thead th {
  position: sticky;
  top: 0;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background: white !important;
}

Before:

After scrolling:

Solution

It's because the shadow is on the thead, but the th elements are the ones that are sticky.

Try changing your style definitions to this:

thead tr {
  box-shadow: 0 5px 10px #e1e5ee;
  position: sticky;
  top: 0;
}

thead th {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background: white !important;
}

Answered By - Geat