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

Question

我有一个带有固定标题行的表格。所有表格单元格都有一个带有 border-radius 的边框。由于此边框，当您垂直滚动时，您可以看到其他单元格的边框与标题行重叠。

例如，在下面的代码片段中，当您滚动时，您可以看到 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>