使用div模拟table

本项目仅供参考，需要浏览器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...