样式 position:sticky
此样式必须用到子元素才能生效,也就是thead的td内才行,而且只能生效一行。
我的thead有两行,所有只能在嵌套一个table,关于监听滚动事件,实现固定两行。实现的大佬可以评论区付一下大码,我实现不了只能用本办法啦。
.wrap{
height: 550px;
overflow: auto;
width: 80%;
}
tr td,th{
margin: 0;
padding: 0;
width:110px;
height: 60px;
line-height: 60px;
text-align: center;
}
.roomtable{
font-size: 12px;
width:1650px;
color: #666;
}
thead th {
width:110px;
height: 60px;
line-height: 60px;
text-align: center;
font-weight: normal;
}
.thead-ul{
position:-webkit-sticky;
position: sticky;
left:0;
top: 0;
z-index:2;
background:#fff ;
padding-bottom:3px ;
}
.top_left{
position:-webkit-sticky;
position: sticky;
left:0;
top: 0;
z-index:3;
background:#fff ;
}
.roomtable>thead tr:nth-child(2) th{
height: 30px;
line-height: 30px;
}
.roomtable tbody tr td:first-child{
position:-webkit-sticky;
position: sticky;
left:0;
z-index: 1;
background-color: #fff;
}
.roomtable>tbody tr td:first-child{
box-shadow: 0 0 1px #72b814;
border-right-color:#72b814;
}
.roomtable tbody tr:nth-child(odd) td:first-child{
position:-webkit-sticky;
position: sticky;
left:0;
z-index: 1;
background:#F4F4F4;
}
.roomtable>tbody tr:nth-child(odd){
background:#F4F4F4;
}
table{
border-top: 1px solid #f1f1f1;
border-left: 1px solid #f1f1f1;
border-collapse: collapse;
box-shadow: 1px 1px 1px 10px #72b814;
}
td,th{
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.roomtable .blue span, .roomtable .yellow span, .roomtable .gray span{
display: inline-block;
background-color:#4285f6;
width: 85%;
float: left;
text-align: left;
padding-left:3px;
color: #fff;
font-size: 14px;
}
.roomtable .yellow span{
background-color: #fea03f;
}
.roomtable .gray span{
background-color: #a6a6a6;
}
.roomtable .blue span:first-child,.roomtable .yellow span:first-child,.roomtable .gray span:first-child{
display: inline-block;
width:9%;
height:60px;
background-color:#72b814;
float: left;
}
<div class="wrap">
<table class="roomtable" >
<thead id="table-head" >
<tr>
<td class="thead-ul" colspan="15">
<table>
<tr><th class="top_left">2020-10-04</th><th>11-04周三</th><th>11-05周四</th><th>11-06周五</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-05周四</th><th>11-06周五</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th></tr>
<tr><th class="top_left">筛选房型</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th>剩184间</th><th></th><th>剩184间</th><th></th><th>剩184间</th><th></th><th>11-04周三</th><th>11-04周三</th><th>11-04周三</th></tr>
</table>
</td>
</tr>
</thead>
<tbody id="table-body">
<tr><td>1</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
<tr><td>2</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
<tr><td>406</td><td class="blue"><span></span><span>123</span></td><td></td><td class="yellow"><span></span><span>123</span></td><td></td><td>肖新品</td><td></td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>剩184间</td><td></td></tr>
<tr><td>306</td><td class="red">剩184间</td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td></tr>
<tr><td>206</td><td>184间</td><td></td><td></td><td>剩184间</td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
<tr><td>106</td><td></td><td>剩184间</td><td></td><td class="gray"><span></span><span>106</span></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
<tr><td>2101</td><td>剩184</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
<tr><td>2</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
<tr><td>3</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
<tr><td>3</td><td>剩184间</td><td></td><td>剩184间</td><td></td><td></td><td>托尔</td><td>肖新品</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td><td>剩184间</td><td></td></tr>
</tbody>
</table>
</div>
最终效果图: