H5移动端滑动表格固定表头和⾸列（纯css实现）HTML部分
<template>
<!-- 表格部分 -->
<div class="contain">
<table class="tb1" frame="void" border="0" cellspacing="0" cellpadding="0">
<thead>
<th>表头⼀</th>
css设置表格滚动条</thead>
</table>
<table class="tb2" frame="void" border="0" cellspacing="0" cellpadding="0">
<thead>
<th>表头⼆</th>
<th>表头三</th>
<th>表头四</th>
<th>表头五</th>
<th>表头六</th>
<th>表头七</th>
<th>表头⼋</th>
</thead>
</table>
<table class="tb3" frame="void" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>⼀⾏列⼀</td>
</tr>
<tr>
<td>⼆⾏列⼀</td>
</tr>
</tbody>
</table>
<table class="tb4" frame="void" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>⼆⾏列⼆</td>
<td>⼆⾏列三</td>
<td>⼆⾏列四</td>
<td>⼆⾏列五</td>
<td>⼆⾏列六</td>
<td>⼆⾏列七</td>
<td>⼆⾏列⼋</td>
</tr>
<tr>
<td>⼆⾏列⼆</td>
<td>⼆⾏列三</td>
<td>⼆⾏列三</td>
<td>⼆⾏列四</td>
<td>⼆⾏列五</td>
<td>⼆⾏列六</td>
<td>⼆⾏列七</td>
<td>⼆⾏列⼋</td>
</tr>
</tbody>
</table>
</div>
</template>
css部分
<style scoped lang='scss'>
// 表格部分
.contain {
-webkit-overflow-scrolling: touch;//ios滑动流畅  width: 100%;
height:100%;
box-sizing: border-box;
position: relative;
overflow: scroll;
th,
td,
tr {
border-bottom: 0.01rem solid #efeff4;
box-sizing: border-box;
height: 0.68rem;
width: 1rem;
font-weight: normal;
text-align: center;
}
.tb1 {
background-color: #f6f7f7;
float: left;
position: sticky;
top: 0;
left: 0;
z-index: 1000;
width: 1.75rem;
th {
font-size: 0.12rem;
color: #212634;
text-align: left;
height: 0.42rem;
padding: 0 0.1rem;
width: 1.75rem;
}
}
.tb2 {
background-color: #f6f7f7;
background-attachment: fixed;
position: sticky;
top: 0;
margin-left: 1.75rem;
height: 0.42rem;
height: 0.42rem;
width: 7rem;
display: block;
z-index: 100;
th {
font-size: 0.12rem;
color: #212634;
text-align: right;
height: 0.42rem;
padding: 0 0.1rem;
}
}
.
tb3 {
background-color: #ffffff;
position: sticky;
left: 0;
z-index: 10;
width: 1.75rem;
td {
font-size: 0.14rem;
color: #212634;
text-align: left;
padding: 0 0.1rem;
}
}
.tb4 {
width: 7rem;
position: absolute;
left: 0;
top: 0;
z-index: 1;
margin: 0.42rem 0 0 1.75rem;
td {
font-size: 0.16rem;
color: #212634;
text-align: right;
padding: 0 0.1rem;
}
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。