表格的粘性 <td> 覆盖粘性标题 <th>。和 <td> 边框在滚动时消失。如何解决这个问题？

【问题标题】：Sticky <td> of table is covering the sticky header <th>. and <td> border get disappered on scroll. How to resolve this?表格的粘性 <td> 覆盖粘性标题 <th>。和 <td> 边框在滚动时消失。如何解决这个问题？
【发布时间】：2020-08-04 10:38:45
【问题描述】：

我想创建一个表格，在向上滚动时固定标题并在左侧滚动固定第一列。我已经分别使用了 'position:sticky' 和 'top:0' & 'left:0' 属性到 .但是在向上滚动时，它会覆盖标题中的标题，并且在向左滚动时会移除粘性边框。请帮我解决这个问题。 

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

【问题讨论】：

    标签： html css html-table bootstrap-4 sticky


    【解决方案1】：

    对第 th 个元素使用z-index，并考虑用背景替换左侧元素的边框

    在下面的代码中检查 cmets：

    .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, 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>

    【讨论】：

    • 非常感谢它的工作，但我后来注意到的另一个问题是；粘性库的标题向左滚动并且不与粘性行保持一致。它应该保持在顶部。你能帮我解决这个问题吗？
    • @Ayes 我不明白，你能给我看一个截图或你突出问题的地方
    • 第 1 列的标题 不向左粘贴，我尝试通过使用相同的 css 为第一个 覆盖 css 来使标题保持粘性，但它不起作用th:nth-child(1) { position: sticky !important; left: 0 !important; top:0 !important; border: 1px solid red; /* background: linear-gradient(#041230,#041230) center/calc(100% - 2px) calc(100% - 2px) no-repeat, red;*/ }跨度>
    • Please see this for reference
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    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