如何确保 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/