Vue +原生固定table表头，body上下滚动，内容对应与横向滚动条

描述： 根据返回数据动态渲染table数据，表头数量不确定（属性不确定或者说是多少列不确定）,这样的话就排除了手动设置列宽的做法，每列平均分也并不可取（有点丑）;然后将body数据设置动态高度，超出设置为滚动条。其实table的x轴也可以设置成超出滚动条，这样的话，就自定义了个表头固定，表体滚动显示，这个table x轴超出滚动。 解决思路 1、采用两个table列表，他们的数据一模一样，以保证他们的高、宽、内容全部都完全一致； 2、table2采用定位的方法与table1两个列表完全重合（table2必须在上面，就是层级），table1的thead部分正常显示，table2的thead将其opacity:设置为0，height设置0;其中的tr th 的height也设置为0； 目的是将其table2的thead隐藏，切不可将display设置为none（会出现table1、与table2的内容不能一一对应）； 如：

3、在table2的外面设置个div盒子，将第二步的定位换到这个div上（这样不一步到位是方便理解），使用定位top属性控制table2的tbody与其table1的tbody重合（就是thead的高度），再将table1的tbody的opacity设置为0（即：工具人理解）； div在于动态控制table2的动态超出纵向滚动条，设置其相较于父级的最大高度超出显示滚动条，因为table2的thead已经隐藏了，height为0了，所以整个table的高度即为table2的tbody的高度，滚动显示的内容即为只有tbody的内容。

即：如果只需要实现固定表头，tbody滚动就到此为止了； 部分参考代码代码如下（仅供参考）：

效果如图：

补充 如想要实现横向滚动条，需要在两个table外面设置一div，仅仅只管横向滚动条即可； 如：

效果如图：