how to make z-index property work on table-border
Question
I have an html file which contains a table.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'> <style media="screen"> body {font-size: 120%;} td, th {text-align: center;} .stickyth th {position: sticky; top: -1px; background: #ccc; z-index: 3;} .col5-out {position: relative; z-index: 2;} .col5-inner {background-image: linear-gradient(135deg, #6303B1, #ff0099); max-width: 25%; left: -22px; border-radius: 25%; transform: rotate(-23deg); top: -11px; position: absolute;} .col5-content {font-size: 75%; padding: 1px 6px;} </style> </head> <body> <table class="table table-bordered table-striped table-hover"> <tr class="stickyth"> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> <th>column 5</th> <th>column 6</th> <th>column 7</th> <th>column 8</th> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> </table> </body> </html>
The table has one <tr> element with css property position:sticky; (the first row of the table), and the other <tr> 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 <tr> 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-indexproperty, and even addingz-indexwith lower numbers for other related elements in the filewrite
.stickythinstead of.stickyth thin thestyletag at the top of the fileadd another
divtags 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?
2 answers
solution1
1 2021-07-23 14:00:55
If you set the border to 0 pixels, you'd get rid of the gap:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'> <style media="screen"> body {font-size: 120%;} td, th {text-align: center;} .stickyth {background: #FFF;} .stickyth th {position: sticky; background: #ccc; top: -1px; z-index: 3; border: 0} .col5-out {position: relative; z-index: 2;} .col5-inner {background-image: linear-gradient(135deg, #6303B1, #ff0099); max-width: 25%; left: -22px; border-radius: 25%; transform: rotate(-23deg); top: -11px; position: absolute;} .col5-content {font-size: 75%; padding: 1px 6px;} </style> </head> <body> <table class="table table-bordered table-striped table-hover"> <tr class="stickyth"> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> <th>column 5</th> <th>column 6</th> <th>column 7</th> <th>column 8</th> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> </table> </body> </html>
solution2
1 ACCPTED 2021-07-23 14:07:55
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; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'> <style media="screen"> body {font-size: 120%;} td, th {text-align: center;} .stickyth th {position: sticky; top: -1px; background: #ccc; z-index: 3;} .col5-out {position: relative; z-index: 2;} .col5-inner {background-image: linear-gradient(135deg, #6303B1, #ff0099); max-width: 25%; left: -22px; border-radius: 25%; transform: rotate(-23deg); top: -11px; position: absolute;} .col5-content {font-size: 75%; padding: 1px 6px;} </style> </head> <body> <table class="table table-bordered table-striped table-hover"> <tr class="stickyth"> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> <th>column 5</th> <th>column 6</th> <th>column 7</th> <th>column 8</th> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> <tr class="not-sticky"> <td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td> <td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td> <td>some text 6</td><td>some text 7</td><td>some text 8</td> </tr> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make z-index to work?
How does the z-index property really work?
Z-index property does not work
z-index property does not work
How to make z-index to work with position: relative;
How can i make the border and z-index stay until the end of the transition?
How does the z-index in :after work
How to force box-shadow & border to back of z-index
How to add a z-index to separate image from div border
CSS z-index property
Related Tags