先看效果
關於移動端表格
移動端的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>和<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的話兼容性很不好，不考慮