大致思路给伪类做成小三角之后旋转45度 给伪类加阴影：
.detail_container::after{
0;
height: 0;
border-style: solid;
border- 5px;
border-color: #fff #fff transparent transparent;
transform: rotate(45deg);
box-shadow: 1px -1px 0.5px rgba(155, 155, 155, 0.5);
// box-shadow: 0 2px 5px 0 rgba(155, 155, 155, 0.5);
content: "";
position: absolute;
top: 14px;
right: -5px;
}
或者 不用伪类 用span
.detail_containe{
display: inline-block;
0;
height: 0;
line-height: 0;
border: px solid transparent;
border-bottom-color: rgba(236, 236, 236, 1);
border-top- 0;
position: absolute;
top: -5px;
}
火狐在<td>中不支持使用position:relative
td不能使用position:relative
table固定头部样式
table tbody {
display:block;
height:500px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
100%;
table-layout:fixed;
}
table thead {
calc( 100% - 1em )
}
更改滚动条样式
.search::-webkit-scrollbar-track-piece {
background-color: #fff;
-webkit-border-radius: 0
}
.search::-webkit-scrollbar {
4px
}
.search::-webkit-scrollbar-thumb {
height: 50px;
background-color: #d1d4db;
-webkit-border-radius: 5px
}
.search::-webkit-scrollbar-thumb:hover {
height: 50px;
background-color: #bfc1c9;
-webkit-border-radius: 5px
}
.search .dorpdown-city::-webkit-scrollbar-track-piece {
background: #f8f9fa
}
或者
.one_checked_course::-webkit-scrollbar {/*滚动条整体样式*/
4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.one_checked_course::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
8px;
height:30px;
background:rgba(40,196,131,1);
border-radius:8px;
}
.one_checked_course::-webkit-scrollbar-track {/*滚动条里面轨道*/
8px;
height:80px;
background:rgba(216,216,216,1);
border-radius:8px;
}
表格表头hover样式
$th:th;
$thafter:thafter;
$thHeight:60px;
$afterHeight:247px;
.#{$th}0{
position: relative;
display: inline-block;
line-height: 60px;
100%;
height: $thHeight;
&:hover+.#{$thafter}0{
position: absolute;
left: 0;
top:0;
z-index: 100;
content: '' ;
//box-shadow:0 2px 10px 0 #959595;
border:1px solid #1f8eff;
100%;
height: $afterHeight;
// background:;
border-top:6px solid #1f8eff;
}
}