Border style do not work with sticky position element

Question

I don\'t know why my border style do not work with position: sticky; attribute. I would like to set border styles on my sticky table header. But I don\'t want t

Answer 1

Because sticky positioning fluctuates between relative and fixed, the only way I can think to circumvent this out-of-box would be take advantage of psuedo classes.

I'm sure there's a more elegant manner to accomplish this but I would just alter the :after and :before psuedo classes to provide the border with absolute positioning.

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  background-color: #edecec;
}
th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}
th:before {
  top: 0;
  border-top: 3px solid blue;
}
th:after {
  bottom: 0;
  border-bottom: 3px solid blue;
}

  

    

      

        
A
        
B
        
C
        
D
        
E
      
    
    

      
1
      
1
      
1
      
1
      
1
    
    

      
2
      
2
      
2
      
2
      
2
    
    

      
3
      
3
      
3
      
3
      
3
    
    

      
4
      
4
      
4
      
4
      
4
    
    

      
5
      
5
      
5
      
5
      
5
    
    

      
6
      
6
      
6
      
6
      
6
    
    

      
7
      
7
      
7
      
7
      
7
    
    

      
8
      
8
      
8
      
8
      
8
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9
    
    

      
9
      
9
      
9
      
9
      
9