如何使 z-index 属性在表格边框上工作

【问题标题】：how to make z-index property work on table-border如何使 z-index 属性在表格边框上工作
【发布时间】：2021-07-23 22:07:55
【问题描述】：

我有一个包含表格的 html 文件。

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

表格有一个&lt;tr&gt; 元素，其css 属性为position:sticky;（表格的第一行），其他&lt;tr&gt; 标记是示例行（这些行中的每个单元格中都有“一些文本”文本)。

在第 5 列中，我为常规&lt;tr&gt; 标记的每个单元格添加了紫色标记，而不是表格的第一行。 看第一张图。

问题是，即使我确实为第一行写了z-index: 3;，紫色标签在表格边框所在的位置仍然可见（参见第二张图片）。

我尝试了一些不起作用的方法：

  1. 更改z-index 属性的数字，甚至为文件中的其他相关元素添加具有较小数字的z-index

  2. 在文件顶部的style 标记中写入.stickyth 而不是.stickyth th

  3. 在第一行和紫色标签中添加另一个div 标签。

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

如何让紫色标签在第一行的表格边框下？

【问题讨论】：

  • 为什么有这么多行（和列）？这对于理解您的问题是否重要且有用？ stackoverflow.com/help/minimal-reproducible-example
  • 如果您将该行的边框设置为另一种颜色，您将看到边框随着页面滚动而该行保持原位。 Bootstrap 折叠表格边框，这就是问题的开始。如果您将边框分开，它将解决问题，但您必须进行一些其他样式更改，因为您会看到单元格之间有一个空格。此链接将阐明问题：stackoverflow.com/questions/50361698/…
  • @MisterJojo 与您的问题有关：您是对的，有很多行，这是因为我希望页面足够长，以便所有 sticky 的东西都能正常工作。关于专栏，这就是我的项目中的内容......我认为8个专栏并不多......
  • 所以这确实是一个让自己放心的考验，所以这里没有立足之地！

标签： html css border z-index


【解决方案1】：

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

这个 sn-p 做了一个稍微老套的解决方法——在每个 th 上放置一个左侧边框，它的颜色是浅灰色的。如果你把它放在 5th 上，它往往看起来与其他的略有不同，所以这使得它们都一样。

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>

【讨论】：

  • 成功了。我在(n) 中写了“5”并将颜色更改为边框的颜色（引导边框），它完全符合我的要求。非常感谢。
【解决方案2】：

如果将边框设置为 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>

【讨论】：

  • 是的..你是对的，但我确实想要边框......如果我能实现我想要的，有边框，我更愿意这样做，而不是仅仅将边框设置为0. 如果这是唯一的选择，我将按照您告诉我的方式将边框设置为 0。同时，我会阅读更多的答案。还是谢谢你。
猜你喜欢
  • 1970-01-01
  • 2013-01-01
  • 2012-06-08
  • 2014-03-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode