我有帶有兩行標題的粘性桌頭。背景的顏色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/
2 回答
守著一只汪
TA貢獻1872條經驗 獲得超4個贊
我認為不可能用邊框來做到這一點。但是您可以使用偽元素::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;
}
UYOU
TA貢獻1878條經驗 獲得超4個贊
在標題上應用偽元素::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/
- 2 回答
- 0 關注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消