先看效果
关于移动端表格
移动端的UI框架大都没有表格组件，pc端的UI框架都是几个表格组合实现固定，然后通过js处理实现同步滚动。这样的好处是容易实现，pc端也不会出现什么问题。但是在手机端时，会有严重的不同步滚动现象，处理的不好时，甚至会出现错位等，体验非常不好。所以在移动端几乎没有可满足我需求的表格！
关于固定首列及表头
本次实现主要用到的是css的两个属性
- table-layout: fixed
- posotion: sticky
table-layout（固定表格布局）
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
table {
table-layout: fixed;
width: 100%;
}
posotion: sticky（ 粘性定位）
sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位， sticky的表现类似于relative和fixed的合体，在超过目标区域时，他会固定于目标位置 ；
注意: posotion: sticky应用于table时，只能作用于 <th></th>和 <td></td>，并且必须定义目标位置left / right / top / bottom来实现固定效果
thead tr th {
position:sticky;
top:0;
}
简单了解这两个属性后，建立一个带表格的html页面
<div class="table_detail">
<table>
<thead>
<tr>
<th>表头0</th>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
<th>表头6</th>
<th>表头7</th>
<th>表头8</th>
<th>表头9</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>汇总0</th>
<th>汇总1</th>
<th>汇总2</th>
<th>汇总3</th>
<th>汇总4</th>
<th>汇总5</th>
<th>汇总6</th>
<th>汇总7</th>
<th>汇总8</th>
<th>汇总9</th>
</tr>
</tfoot>
</table>
</div>
css部分
<style lang="less" scoped>
.table_detail{
overflow:auto;
width: 100%;
/* 固定滚动高度 */
max-height: calc(100vh - 220px);
border-top: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-right: 0;
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
td, th {
border-right: 1px solid #EBEBEB;
border-bottom :1px solid #EBEBEB;
width:70px;
//height:40px;
color: #333;
box-sizing: border-box;
background-color: #ffffff;
font-size: 12px;
text-align: center;
padding: 5px 5px 5px 0;
}
th {
background: #FAFAFA;
color: #999;
font-weight: normal;
}
// 固定首列
td:first-child,
th:first-child {
width:100px;
position:sticky;
left:0;
z-index:1;
padding-left: 5px;
}
// 固定表头
thead tr th {
position:sticky;
top:0;
}
th:first-child{
z-index:2;
}
// 固定表头
tfoot tr th {
position:sticky;
bottom:0;
color: #333;
font-weight: bold;
border-bottom: 0;
}
th:first-child{
z-index:2;
}
}
</style>
最后备注：
- z-index很重要，需要仔细设置，尤其是对于ios
- 如果是固定多列，每一列需要注意设置好left的值
- 使用vue框架，ie的话兼容性很不好，不考虑