使粘性表格标题行完全不透明

Question

我有一个带有粘性标题行的表格。所有表格单元格都有一个带边框半径的边框。由于这个边框，当你垂直滚动时，你可以看到其他单元格的边框与标题行重叠。

例如，在下面的 sn-p 中，当您滚动时，您可以看到 tbody 单元格的黑色边框从 thead 单元格顶部的“后面”窥视。

有没有办法让标题行完全不透明，这样当你滚动时，所有重叠的元素都会被隐藏？

.table-wrapper {
  height: 90px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

td,
th {
  width: 50px;
}

th {
  background-color: #00aeef;
  border-radius: 5px;
}

td {
  border-radius: 5px;
  border: 5px solid black;
}

thead>tr>th {
  top: 0;
  position: sticky;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您可以在第 th 个元素周围设置阴影，它会完成这项工作。

我已经把它设置成黄色让它更显眼，当然你也可以把它设置成白色

.table-wrapper {
  height: 90px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

td,
th {
  width: 50px;
}

th {
  background-color: #00aeef;
  border-radius: 5px;
  box-shadow: 10px -6px 0px 6px yellow, -4px -6px 0px 6px yellow;
}

td {
  border-radius: 5px;
  border: 5px solid black;
}

thead>tr>th {
  top: 0;
  position: sticky;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

在它周围使用 box-shadow，因此 'tr' 会在单元格间距中消失，而不是直接在蓝色 'th's 下方：

th {
    box-shadow: 5px 5px white, -5px 5px white, -5px -5px white, 5px -5px white;
    background-color: #00aeef;
    border-radius: 5px;
}

工作示例：

.table-wrapper {
  height: 90px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

td,
th {
  width: 50px;
}

th {
  box-shadow: 5px 5px white, -5px 5px white, -5px -5px white, 5px -5px white;
  background-color: #00aeef;
  border-radius: 5px;
}

td {
  border-radius: 5px;
  border: 5px solid black;
}

thead>tr>th {
  top: 0;
  position: sticky;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
    </tbody>
  </table>
</div>