一、效果展示
1、效果视频展示
首行固定表格效果-CSDN直播首行固定表格效果https://live.csdn.net/v/325995
2、效果图片展示
二、HTML实现
<div class="branch_table" v-show="tabActive == 1">
<div class="table_head">
<table style="border-spacing: 0px">
<thead class="table_title">
<tr>
<th>分校</th>
<th>累计访问<br />人数</th>
<th>累计访问<br />时长(min)</th>
<th>昨日新增<br />访问人数</th>
<th>昨日新增访<br />问时长(min)</th>
</tr>
</thead>
</table>
</div>
<div class="table_body">
<table class="branch_tbody" align="center">
<tbody>
<tr v-for="item in clueList" :key="item.branchId">
<td>{{ item.branchName }}</td>
<td>{{ item.totalUv }}</td>
<td>{{ item.totalVisitTime.toFixed(2) }}</td>
<td>{{ item.increasedUv }}</td>
<td>{{ item.increasedVisitTime.toFixed(2) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
.branch_table {
height: calc(100% - 136px);
/deep/.van-sticky--fixed {
width: 343px;
}
.table_title {
width: 343px;
font-size: 12px;
height: 52px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 400;
color: #ffffff;
border-radius: 16px;
tr {
display: flex;
height: 52px;
th {
background: #5b8ff9;
border-right: 1px solid #fff;
padding-top: 10px;
box-sizing: border-box;
}
}
th,
td {
width: 64px;
font-size: 12px;
text-align: center;
font-weight: 500;
}
th:first-child {
width: 80px;
padding-top: 18px;
border-radius: 16px 0px 0px 0px;
}
th:last-child {
width: 71px;
border-radius: 0px 16px 0px 0px;
}
}
.table_body {
// height: calc(100vh - 200px);
height: calc(100% - 55px);
// overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
}
.branch_tbody {
width: 100%;
border-collapse: collapse;
tr {
display: flex;
height: 32px;
&:nth-child(odd) {
background: #e8f7ff;
// border: 0.02667rem solid #f7f7f7;
}
&:nth-child(even) {
background: #fff9ed;
}
&:last-child {
border-bottom: 1px solid #f7f7f7;
}
td {
width: 64px;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: center;
font-size: 14px;
text-align: center;
border: 1px solid #f7f7f7;
border-left: none;
border-bottom: none;
}
td:first-child {
width: 80px;
font-size: 12px;
font-weight: 600;
border-left: 1px solid #f7f7f7;
background-color: #ffffff;
}
td:last-child {
width: 71px;
}
}
}
}
三、实现思路
思路一:利用固定定位将表头固定
通过固定定位实现之后,大体效果虽然实现了,但是在ios遇到了问题:拖动整个表格的时候,表体会移动,但是表头还固定在页面上十分怪异
思路二、利用粘性布局
粘性布局在部分安卓手机自带的浏览器上遇到了问题,表头随着表格滚动上去了,没有固定表头的效果,具体原因没有深究
思路三、拆分表头表体(自测是效果最优的)
把表头和表格体拆分,表体滚动的关键在于固定高度,超出高度部分显示滚动条,