时间戳

首页 > 解决方案 > 在带有粘性标题和边框间距的表格中滚动时隐藏内容

html - 在带有粘性标题和边框间距的表格中滚动时隐藏内容

问题描述

我已经尝试解决这个问题好几天了，但我仍然不知道如何解决这个问题。作为片段显示，我创建了一个带有水平粘性标题的表格和一些带有“colspan”和颜色背景的行。当我滚动表格时，行的颜色内容（灰色）显示在“边框间距”创建的空间中。
我似乎找不到解决方案。

   .table-scroll {
      position: relative;
      width: 500px;
      overflow: auto;
      height: 400px;
    }
    .table-scroll table{
      width: 100%;
      min-width: 600px;
      margin: auto;
      border-collapse: separate;
      border-spacing: 2px;
      display: table !important;
    }

    .table-scroll tr:nth-child(1) th{
      background: lightseagreen;
      color: #fff;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 6;
    }

    .table-scroll tr:nth-child(1) th{
      top: 0 !important;
    }

    .table-scroll tr:nth-child(1) th:nth-child(1){
      z-index: 7;
    }

    th:first-child{
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      z-index: 5;
      background: darkslategray;
      color: #000;
    }
    td{
      background: grey;
    }
  <div id="table-scroll" class="table-scroll" style="margin-top: 50px; margin-bottom: 50px;">
    <table id="main-table" class="main-table">
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3 with longer content</th>
        <th scope="col">Header 4 text</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
        <th scope="col">Header 8</th>
      </tr>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3 with longer content</th>
        <th scope="col">Header 4 text</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
        <th scope="col">Header 8</th>
      </tr>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3 with longer content</th>
        <th scope="col">Header 4 text</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
        <th scope="col">Header 8</th>
      </tr>
      <tr>
        <th>First top Column</th>
        <td>Cell content<br>
          test </td>
        <td><a href="#">Cell content longer</a></td>
        <td>Cell content with more content and more content Cell </td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
    </table>
  </div>

标签： htmlcss

解决方案

也许如果您使用彩色边框而不是边框​​间距可以成为一个解决方案。

我更改了您的代码一段时间只是为了显示差异。

.table-scroll {
  position: relative;
  width: 500px;
  overflow: auto;
  height: 400px;
}

.table-scroll table {
  width: 100%;
  min-width: 600px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0px;
  display: table !important;
}

.table-scroll table thead th + th {
  border-left: 2px solid #fff;
}

.table-scroll table td {
  border: 1px solid #fff;
}

.table-scroll table td:first-child {
  border-left: 2px solid #fff;
}

.table-scroll thead th {
  background: lightseagreen;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 6;
}

.table-scroll tr:nth-child(1) th {
  top: 0 !important;
}

.table-scroll tr:nth-child(1) th:nth-child(1) {
  z-index: 7;
}

th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  background: darkslategray;
  color: #000;
  border: 0px;
}
td {
  background: grey;
}
 <div id="table-scroll" class="table-scroll" style="margin-top: 50px; margin-bottom: 50px;">
    <table id="main-table" class="main-table">
      <thead>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3 with longer content</th>
        <th scope="col">Header 4 text</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
      </thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3 with longer content</th>
        <th scope="col">Header 4 text</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
        <th scope="col">Header 8</th>
      </tr>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3 with longer content</th>
        <th scope="col">Header 4 text</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
        <th scope="col">Header 8</th>
      </tr>
      <tr>
        <th>First top Column</th>
        <td>Cell content<br>
          test </td>
        <td><a href="#">Cell content longer</a></td>
        <td>Cell content with more content and more content Cell </td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td colspan="7">Cell content</td>
      </tr>
    </table>
  </div>

推荐阅读