Html 黏糊糊的边境消失了

当我用

html

和

css

设置一个带有粘头的excel样式表时，我意识到表头上的边框看起来很奇怪

代码如下：

表格{
边界塌陷：塌陷；
位置：相对位置；
}
tr:n个孩子（偶数）{
背景颜色：浅灰色；
}
th{
背景颜色：浅蓝色；
位置：粘性；
排名：0；
}
th，
运输署{
边框：1px纯黑；
填充：10px 20px；
}

第1栏
第2栏
一排
一排
第2排
第2排

边框折叠：折叠将删除其中一个重叠边框。如果您确实不喜欢厚边框效果，可以创建两个表，一个用于

，另一个用于

tbody

，并设置

td{border top:0px！important；}

：

tr:n个子项（偶数）{
背景颜色：浅灰色；
}
桌子{
边界塌陷：塌陷；
}
.头衔{
背景颜色：浅蓝色；
位置：粘性；
排名：0；
}
th，
运输署{
边框：1px纯黑；
填充：10px 20px；
}
运输署{
边框顶部：0px！重要；
}

第1栏
第2栏
一排
一排
第2排
第2排

您需要使用边框折叠：分离并仅设置底部和左侧边框

表格的边缘可以有针对性地填充缺少的边框，如下所示：

table {
  position: relative;
  border-collapse: separate;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;
}

th, td{
  border-color:black;
  border-style:solid;
  border-width:0 0 1px 1px;
  padding: 10px 20px;
}

th{
  border-top-width:1px;
}

th:last-child, td:last-child
{
  border-right-width:1px;
}

tr:last-child td{
  border-bottom-width:1px;
}

---

一个解决方案可能是一个阴影：

测试了今天最新的Chrome和Firefox

或下面的演示，您可以查看，发表评论，看看这是否可以作为您的替代方案

表格{
位置：相对位置；
}
tr:n个孩子（偶数）{
背景颜色：浅灰色；
}
th{
背景颜色：浅蓝色；
位置：粘性；
顶部：0；长方体阴影：0 1px
}
th，
运输署{
边框：1px纯黑；
填充：10px 20px；
}

第1栏
第2栏
第3栏
第4栏
一排
一排
一排
一排
第2排
第2排
第2排
第2排
第3排
第3排
第3排
第3排
第4排
第4排
第4排
第4排
第5行
第5行
第5行
第5行
第6行
第6行
第6行
第6行
第7排
第7排
第7排
第7排

这是否回答了您的问题？