table 边框（border）样式不适用于粘性（sticky）位置元素

参考：https://qastack.cn/programming/50361698/border-style-do-not-work-with-sticky-position-element

当浏览器折叠边框时，<th>必须将的顶部和底部边框应用于周围的元素-的顶部边框<table>和底部的底部边框<tr>。

如果您使用border-collapse: separate边框并将边框设置为一侧，则边框将真正附着在上<th>，如预期那样保持固定，并显示为已折叠。

这是可以应用于HTML代码段的示例样式。

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}