position:sticky固定table表头时th边框属性失效如何解决

你遇到的边框不跟随固定表头的问题，核心是border-collapse: collapse属性的特性导致：该模式下表格所有单元格的边框是共享状态，你给th设置的下边框本质上和tbody第一行tr的上边框共用，滚动时thead被sticky固定，但共享边框仍然跟随整体表格布局滚动，不会跟着固定的thead停留。

推荐两种常用的修复方式，可根据需求选择：

方案一：用box-shadow模拟边框（改动最小） #

直接用th自身的内阴影代替共享的border-bottom，不需要修改原有表格的边框折叠规则，代码改动最少：

table{
  border-collapse: collapse;
  border:1px solid gray;
  width: 100%;
}

th{
  text-align: left;
  /* 把sticky属性加到th上，不要加在thead上 */
  position: sticky;
  top: 0;
  background-color: yellow;
  /* 用内阴影模拟下边框，完全属于th自身，会跟随固定 */
  box-shadow: inset 0 -1px 0 black;
  /* 可选：加z-index避免被其他元素覆盖 */
  z-index: 1;
}

.container{
  overflow-y: auto;
  height: 200px;
  background-color: yellow;
}

/* 移除原thead的sticky样式即可 */

方案二：修改边框模式为非共享（用原生border） #

如果需要保留原生border属性，把表格的边框折叠模式改为separate，手动处理边框重合问题：

table{
  /* 关闭边框共享 */
  border-collapse: separate;
  border-spacing: 0;
  border:1px solid gray;
  width: 100%;
}

th, td {
  text-align: left;
  border-bottom: 1px solid black;
  border-right: 1px solid gray;
}
/* 移除最后一列的右边框，避免重复 */
th:last-child, td:last-child {
  border-right: none;
}
/* 移除最后一行的下边框，避免重复 */
tr:last-child td {
  border-bottom: none;
}

th{
  position: sticky;
  top: 0;
  background-color: yellow;
  z-index: 1;
}

.container{
  overflow-y: auto;
  height: 200px;
  background-color: yellow;
}

两种方案都可以完美解决边框不跟随固定表头的问题，方案一改动更少更推荐。

内容的提问来源于stack exchange，提问作者3gwebtrain