php123
Reputation: 149
how to make z-index property work on table-border
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?
Upvotes: 3
Views: 1531
Answers (2)
A Haworth
Reputation: 36626
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>Upvotes: 1
Douwe de Haan
Reputation: 6666
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>Upvotes: 1
Related Questions
- using z-index and diagonal items inside of a table <td> element
- Z-index on borders
- Z-index not working inside a table if there is an overflow-scroll on container
- z-index on a table row not working
- z-index on table tr above global overlay
- HTML & CSS | Border ignores z-index
- z-index is not working inside table
- CSS z-index issue when inside of table cell
- Cannot get z-index to work in my table
- border z-index problem