z-index perks.

You should set z-index to an appropriate (higher) value on thead th. If there are no other z-index values specified, 1 should suffice.

Hello I’m having issues with sticky headers. I have three columns but the last column, when I scroll, the data decides to overlap my header. I’m not sure why it does this. Thanks in advance!

Screen Capture of Issue:

My CSS Code:

.Job-Report-Table {
      position: relative;
      display: flex;
      border-bottom: 2px solid #414141;
      max-height: 450px;
      overflow-y: scroll;
      thead th {
        position: sticky;
        top: 0;
      }
      .table {
        .tableHeader {
          font-size: 16px;
          color: #414141;
          // background-color: #d8d8d8;
          .cell-1 {
            background-color: #5b5b5b;
            color: #ffffff;
            vertical-align: middle;
          }
          .cell-2 {
            vertical-align: middle;
            background-color: #d8d8d8;
          }
          .cell-3 {
            vertical-align: middle;
            background-color: #d8d8d8;
          }
     }
}