如何确保 html 表格的粘性行为不会因背景颜色而改变？

Question

我有带有两行标题的粘性桌头。背景的颜色thead必须是白色，这样我可以保持粘性行为，但背景覆盖了行的边框。如何使边框出现在背景上？.table-responsive {  height: 500px;}thead {  position: sticky;  top: 0px;  background: white; /*   removing background color allow border to appear (though not perfectly) but then the sticky behavior doesn't quite work */  z-index: 3;}.sticky-col-top {  position: sticky;  left: 0px;  top: 0px;  max-width: 6em;  min-width: 6em;  background: white;  background-clip: padding-box;  z-index: 3;}.weekday-row {  border-top: 3px solid #E2E2E2;}.sticky-col {    position: sticky;    left: 0px;    width: 6em;    background: white;    background-clip: padding-box;    border-bottom: 1px solid #E2E2E2;    font-weight: normal;    font-size: 14px;    z-index: 2;}td:nth-child(even),th:not(.days):nth-child(even) {  background: #F7F7F7;}.days {  color: #606060;}js小提琴：https://jsfiddle.net/base_kh/t59xrjw6/13/

Answer 1

我认为不可能用边框来做到这一点。但是您可以使用伪元素::after和来模拟边框::before：

首先：删除默认的引导边框：

.table tbody td, .table tbody th {

  border: none;

}

然后添加相对于表格行的位置：

.table tbody tr {

  position: relative;

}

现在，添加伪元素：

.table tbody tr::after {

  display: block;

  content: '';

  top: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background-color: #dee2e6;

  position: absolute;

  z-index: 4;

}

结果：

.table-responsive {

  height: 500px;

}

thead {

  position: sticky;

  top: 0px;

  background: white; 

/*   removing background color allow border to appear (though not perfectly) but then the sticky behavior doesn't quite work */

  z-index: 3;

}

.sticky-col-top {

  position: sticky;

  left: 0px;

  top: 0px;

  max-width: 6em;

  min-width: 6em;

  background: white;

  background-clip: padding-box;

  z-index: 3;

}

.weekday-row {

  border-top: 3px solid #E2E2E2;

}

.sticky-col {

    position: sticky;

    left: 0px;

    width: 6em;

    background: white;

    background-clip: padding-box;

    border-bottom: 1px solid #E2E2E2;

    font-weight: normal;

    font-size: 14px;

    z-index: 2;

}

.table tbody td, .table tbody th {

  border: none;

}

.table tbody tr {

  position: relative;

}

.table tbody tr::after {

  display: block;

  content: '';

  top: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background-color: #dee2e6;

  position: absolute;

  

  z-index: 4;

}

td:nth-child(even),

th:not(.days):nth-child(even) {

  background: #F7F7F7;

}

.days {

  color: #606060;

}

Answer 2

在标题上应用伪元素::before就成功了，感谢@m51给我提供了关键的线索！

我所需要的只是将以下内容添加到我的 css 中：

th {

  position: relative;

}

.sticky-border th::before{

  content: "";

  left: 0;

  position: absolute;

  right: 0;

  top: 0;

  border-top: 1px solid #E2E2E2;

}

和js小提琴：https://jsfiddle.net/base_kh/t59xrjw6/22/