表格覆盖了粘贴标头。和边框在滚动时消失。如何解决?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表格覆盖了粘贴标头。和边框在滚动时消失。如何解决?相关的知识,希望对你有一定的参考价值。
我想创建一个表,该表在向上滚动时具有固定标题,在左滚动时固定第一列。我已经分别将'position:sticky'与'top:0'和'left:0'属性用于,并触发了每个child()。但是在向上滚动时,其覆盖标题的标题和粘性边框在向左滚动时被删除。请帮助我解决此问题。
<!DOCTYPE html>
<html>
<head>
<style>
/* CUSTOM */
.tableFixHead {
overflow-y: auto;
max-height: 300px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 100px;
/*min-height: 200px;
max-height: 500px;*/
/* min-width: 600px;*/
}
.tableFixHead thead th { position: sticky; top: 0; }
/* Borders */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #293033;
}
.tableFixHead th {
box-shadow: inset 1px 1px #293033, 0 1px #293033;
}
table {
border-spacing: 0;
}
th {
/* t
ext-align: center;*/
padding: 8px;
/*padding-left: 20px;*/
color: #e9ecef;
background-color: #1e2324;
font-weight: 500;
font-size: 14px;
}
thead{
text-align: center;
}
td {
background-color: #041230;
text-align: center;
padding: 10px;
color: #e9ecef;
min-width: 150px;
font-size: 13px;
word-spacing: 2px;
}
td:nth-child(1) {
min-width: 50px;
max-width: 50px;
font-weight: bold;
color: #66FCF1;
position: sticky;
left: 0;
border: 1px solid red;
}
.fix-table
{
/* margin-top: 100px;*/
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resCSS.css">
</head>
<body>
<div class="container">
<div class="tableFixHead">
<table class="tablecolor2">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
<td>row 3, cell 6</td>
<td>row 3, cell 7</td>
<td>row 3, cell 8</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
<td>row 4, cell 6</td>
<td>row 4, cell 7</td>
<td>row 4, cell 8</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
<td>row 3, cell 6</td>
<td>row 3, cell 7</td>
<td>row 3, cell 8</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
<td>row 4, cell 6</td>
<td>row 4, cell 7</td>
<td>row 4, cell 8</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
<td>row 3, cell 6</td>
<td>row 3, cell 7</td>
<td>row 3, cell 8</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
<td>row 4, cell 6</td>
<td>row 4, cell 7</td>
<td>row 4, cell 8</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
<td>row 3, cell 6</td>
<td>row 3, cell 7</td>
<td>row 3, cell 8</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
<td>row 4, cell 6</td>
<td>row 4, cell 7</td>
<td>row 4, cell 8</td>
</tr>
</tbody>
</table>
</div>
<!-- Table Dormant / Discontinued -->
</div><!-- container -->
</body>
</html>
答案
对第th个元素使用z-index
,并考虑用背景替换左元素的边框
检查下面的代码中的注释:
.tableFixHead {
overflow-y: auto;
max-height: 300px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 100px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
z-index:1; /* added */
}
/* Borders */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #293033;
}
.tableFixHead th {
box-shadow: inset 1px 1px #293033, 0 1px #293033;
}
table {
border-spacing: 0;
}
th {
padding: 8px;
color: #e9ecef;
background-color: #1e2324;
font-weight: 500;
font-size: 14px;
}
thead {
text-align: center;
}
td {
background-color: #041230;
text-align: center;
padding: 10px;
color: #e9ecef;
min-width: 150px;
font-size: 13px;
word-spacing: 2px;
}
td:nth-child(1) {
min-width: 50px;
max-width: 50px;
font-weight: bold;
color: #66FCF1;
/* added */
background:
linear-gradient(#041230,#041230) center/calc(100% - 2px) calc(100% - 2px) no-repeat,
red;
/**/
position: sticky;
left: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="tableFixHead">
<table class="tablecolor2">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
<td>row 3, cell 6</td>
<td>row 3, cell 7</td>
<td>row 3, cell 8</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
<td>row 4, cell 6</td>
<td>row 4, cell 7</td>
<td>row 4, cell 8</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
<td>row 3, cell 6</td>
<td>row 3, cell 7</td>
<td>row 3, cell 8</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
<td>row 4, cell 6</td>
<td>row 4, cell 7</td>
<td>row 4, cell 8</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
<td>row 3, cell 6</td>
<td>row 3, cell 7</td>
<td>row 3, cell 8</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
<td>row 4, cell 6</td>
<td>row 4, cell 7</td>
<td>row 4, cell 8</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
<td>row 2, cell 6</td>
<td>row 2, cell 7</td>
<td>row 2, cell 8</td>
</tr>
<tr>
<td>row 3,以上是关于表格覆盖了粘贴标头。和边框在滚动时消失。如何解决?的主要内容,如果未能解决你的问题,请参考以下文章
在基于 Gecko 的浏览器中消失的 CSS 表格单元格边框
ckeditor编辑器粘贴Excel、word表格表格样式丢失