gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 07:21:03 25 4
gpt4 key购买 nike

我有一个包含表格的 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>

该表有一个 <tr>具有 css 属性的元素 position:sticky; (表格的第一行),另一个 <tr>标签是示例行(这些行中的每个单元格中都有“一些文本”文本)。
在第 5 列中,我为常规 <tr> 的每个单元格添加了类似紫色标签的内容。标签,而不是表格的第一行。
看第一张图。
enter image description here
问题是即使我写了 z-index: 3;对于第一行,紫色标签在表格边框所在的位置可见(参见第二张图片)。
enter image description here
我尝试了一些不起作用的东西:
  • 更改 z-index 的号码属性,甚至添加 z-index文件中其他相关元素的数字较低
  • .stickyth而不是 .stickyth thstyle文件顶部的标签
  • 添加另一个 div第一行和紫色标签中的标签。

  • 我没有成功实现我想要的。
    我怎样才能让紫色标签成为 第一行的表格边框?

    最佳答案

    这似乎有点奇怪,但似乎正在发生的是,即使元素本身位于已卡住的粘性元素中,边框也会滚动。
    这个片段做了一个稍微有点麻烦的解决方法 - 在每个 th 上放置一个左侧边框,它具有浅灰色。如果你把它放在 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>

    关于html - 如何使 z-index 属性在表格边框上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68500223/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com