HTML部分css
<template> <!-- 表格部分 --> <div class="contain"> <table class="tb1" frame="void" border="0" cellspacing="0" cellpadding="0"> <thead> <th>表头一</th> </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> </tr> </tbody> </table> </div> </template>
css部分ios
<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; 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>