本项目仅供参考，需要浏览器css支持display:flex,position:sticky等特性
为什么模拟table
从功能上来讲，行列的数据更适合使用table，所以当您的需求中没有固定表头，固定列时，请直接使用table，模拟table更多的是解决固定表头，固定列等事情。
table有哪些问题
body不能滚动
当数据量多时，我们期望表头或表尾固定，只滚动中间区域，但是<tbody>不能做为滚动容器。如果我们强制改变<tbody>的display使它可以滚动，然后<thead>中的列和<tbody>中的列就对不齐了。
然后我们可能就要上javascript然后各种同步列的宽度了，然后你会发现解决1个问题会引入3个问题，到最后列可能还会有些许的偏差并没有对齐。
这个网上的案例有一些，感兴趣的话可以搜搜看
sticky
我们知道css3中position新增了sticky，如果浏览器支持，直接在<thead>上使用position:sticky就完成了表头固定，多好？
chrome曾经支持过<thead>上设置position:sticky，但是后来不知为何又去掉了，然后目前没有浏览器支持<thead>上设置position:sticky，这都什么鬼？具体可以看下caniuse。https://caniuse.com/#search=s...
table做固定表头，固定列功能
网上常见的做法是使用4个表格来完成相应的功能，以ant.design为代表，可以看下它的效果和实现:https://ant.design/components...
这种做法实现起来麻烦，计算的量也不少，在表头固定、首列固定、尾列固定、表尾固定这些需求同时存在的情况下，列对齐需要计算，然后同步。行高需要计算，然后同步，据说ant.design是以中间行为最大高度，然后去同步首列中的行和尾列的行。
做到最后依然可能对不齐，我在ant.design中的表格组件上经常能见到对不齐的bug
做完各种计算后，如果要实现鼠标移上行变色，你会发现css中的hover伪类没法使用，因为表格是分离的，这时候就又需要绑定javascript事件进行模拟实现，这个简直了...
div模拟表格
该方法仍然需要计算，但计算量少了很多，只需要列宽计算
因为行没有被拆分，所以行高不需要计算对齐，同时可以使用css中的hover伪类实现鼠标移入变色
示例可查看 https://xinglie.github.io/mag...
项目地址 https://github.com/xinglie/ma...
