原生table表头固定标题垂直滚动

需求场景

前后端不分离项目中的表格，想实现表格垂直方向滚动时只有表体滚动，表头一直固定在头部，横向滚动时表头和表体均横向滚动，同时整个表格以及内部元素宽度100%，占满空间

最终实现效果

1. 宽度大于父元素宽度(宽度100%)
2. 宽度小于父元素宽度

解决思路

1. 通过粘性布局`position: sticky;`实现表头固定
2. 给祖先级别元素设置滚动
    - 给table设置垂直滚动宽度`width:100%`，结果会发现表格内部不能够撑开100%，设置`height:200px;overflow-y: auto;`能实现垂直方向上的滚动
    - 此时建议给table外部增加一个父元素，给其设置`overflow-y: auto;width:100%;height:200px;`完美解决

代码片段