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

You need to use box-shadow property instead of border-top/border-bottom. Additionally you need to delete top/bottom borders for the head and first row of table.

#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 : 0;
                background-color : #edecec;
            }

            /* here is the trick */
            table tbody:nth-of-type(1) tr:nth-of-type(1) td {
                border-top: none !important;
            }
            table thead th {
                border-top: none !important;
                border-bottom: none !important;
                box-shadow: inset 0 2px 0 #000000,
                            inset 0 -2px 0 #000000;
                padding: 2px 0;
            }
            /* and one small fix for weird FF behavior, described in https://stackoverflow.com/questions/7517127/ */
            table thead th {
                background-clip: padding-box
            }
            

        

            

                

                    

                        
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