如何使 z-index 属性在 table-border 上工作

Question

我有一个 html 文件，其中包含 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>

table 有一个 <tr> 元素带有 css 属性 position:sticky;（table 的第一行），并且其他 <tr> 标签是示例行（这些行中的每个单元格中都有“一些文本”文本）。

在第 5 列中，我为常规 <tr> 标签的每个单元格添加了一个紫色标签，而不是 table 的第一行。看第一张图

问题是，即使我确实在第一行写了 z-index: 3;，紫色标签在 table 的边框处是可见的（见第二张图片）。

我尝试了一些无效的方法：

更改 z-index 属性的编号，甚至为文件中的其他相关元素添加编号较小的 z-index
在文件顶部的 style 标签中写入 .stickyth 而不是 .stickyth th
在第一行和紫色标签中添加另一个 div 标签。

我没有成功实现我想要的。

如何让紫色标签位于第一行 table 边框下方下方？

Answer 1

如果将边框设置为 0 像素，就会消除间隙：

<!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>

Answer 2

这似乎有点奇怪，但似乎正在发生的事情是，即使元素本身位于粘性元素内，边框也会滚动。

此代码段采用了一种略显笨拙的解决方法 - 在每个具有浅灰色的边框上放置一个左侧边框。如果你把它放在 5 号，它往往看起来与其他的略有不同，所以这使得它们都是一样的。

after 伪元素不滚动所以紫色位在下面 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>

如何使 z-index 属性 在 table-border 上工作

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

html

css

border

z-index

如何使 z-index 属性在 table-border 上工作