how to make z-index property work on table-border

Question

I have an html file which contains a table.



  
    
    
  
  
    
            
              column 1
              column 2
              column 3
              column 4
              column 5
              column 6
              column 7
              column 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8

The table has one element with css property position:sticky; (the first row of the table), and the other tags are example rows (every cell in these rows has "some text" text in it).

In column number 5, I added something like a purple tag for each cell of the regular tag, not the first row of the table. see the first picture.

The problem is that even though I did wrote z-index: 3; for the first row, the purple tag is visible where the border of the table is (see the second picture).

I tried some things that didn't work:

change the numbers of the z-index property, and even adding z-index with lower numbers for other related elements in the file
write .stickyth instead of .stickyth th in the style tag at the top of the file
add another div tags in the first row and in the purple tag.

I didn't succeed to achive what I wanted.

How can I make the purple tag be under the table border of the first row?

user_1336174 · Answer

If you set the border to 0 pixels, you'd get rid of the gap:



  
    
    
  
  
    
            
              column 1
              column 2
              column 3
              column 4
              column 5
              column 6
              column 7
              column 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8

user_10867454 · Answer

It seems a bit odd, but what seems to be happening is that the border scrolls even when the element itself is inside a sticky one which has stuck.

This snippet does a slightly hacky workaround - putting a left side border on each th which has a light grayish color. If you put it just on the 5th th it tends to look just slightly different from the others, so this makes them all the same.

The after pseudo element does not scroll so the purple bits go underneath OK.

tr.stickyth th:nth-of-type(n)::before {
  content: '';
  position: absolute;
  width: 0.5px;
  height: 100%;
  top: 0;
  left: -1px;
  background-color: #eeeeee;
}



  
    
    
  
  
    
            
              column 1
              column 2
              column 3
              column 4
              column 5
              column 6
              column 7
              column 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8
            
            
              some text 1 some text 2 some text 3 some text 4
              some text 5tinytext
              some text 6 some text 7 some text 8

how to make z-index property work on table-border

2 Answers