使用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...