如何防止粘性表格标题在边框中显示水平滚动的内容？

Question

我想防止水平滚动时红色标题显示在蓝色标题的边框中。我的蓝色标题中必须有一个白色边框。

.container {
  overflow: auto;
  width: 200px;
}

table {
  border-collapse: collapse;
}

th {
  background-color: red;
  border-right: 1px solid white;
  color: white;
  padding: 10px;
  z-index: 1;
}

.sticky {
  background-color: blue;
  position: sticky;
  z-index: 2;
}

.test1 {
  left: 0;
}

.test2 {
  left: 57px;
}

.test3 {
  left: 114px;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th class="sticky test1">
        Test1
        </th>
        <th class="sticky test2">
        Test2
        </th>
        <th class="sticky test3">
        Test3
        </th>
        <th>
        Test4
        </th>
        <th>
        Test5
        </th>
        <th>
        Test6
        </th>
      </tr>
    </thead>
  </table>
</div>

我想防止水平滚动时红色标题显示在蓝色标题的边框中。我的蓝色标题中必须有一个白色边框。

Answer 1

您可以通过向粘性类添加框阴影来实现此目的

.sticky {
    ....
    box-shadow: 2px 0px 0px white;
}