Table headers position:sticky and border issue

Question

I have a table that I\'m trying to get sticky headers, following this article. Except my table style has the headers with a border at the top and bottom.

The part I

Answer 1

You can add

.table {
  border-collapse: separate;
}

But unfortunately it looks bad, a better solution will be adding a workaround using a pseudo-element.

th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid red;
}

th:after {
  bottom: -1px;
  border-bottom: 2px solid red;
}

.table-sticky-container {
  height: 200px;
  overflow-y: scroll;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}

.table-sticky th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid red;
}

th:after {
  bottom: -1px;
  border-bottom: 2px solid red;
}

    

      

        

          
Name
          
Title
          
ID
          
Username
        
      
      

        

          
Malcolm Reynolds
          
Captain
          
9035749867
          
mreynolds
        
        

          
Zoe Washburne
          
First Officer
          
8908980980
          
zwashburne
        
        

          
Kaylee Frye
          
Engineer
          
6678687678
          
kfrye
        
        

          
Malcolm Reynolds
          
Captain
          
9035749867
          
mreynolds
        
        

          
Zoe Washburne
          
First Officer
          
8908980980
          
zwashburne
        
        

          
Kaylee Frye
          
Engineer
          
6678687678
          
kfrye
        
      
    
  

The second solution

.table {
  border-collapse: collapse;
}

.table-sticky thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 1px 0 red, inset 0 -2px 0 red;
 }