用浏览器审视下代码发现<thead>和<tbody>并不在一个<table>下
image.png
再看下源码下的目录
table-body
table-header
是的，thead和tbody是分开写的，那为什么这样要分开写呢？分开写后每一列是怎么对齐的？
先看下列是怎么对齐的。
image.png
看代码发现使用colgroup属性控制他们有相同宽度的列。name可以不写，按顺序对应th，td。并且table的样式改为table-layout: fixed;border-collapse: separate。
开发中会发现td，th的属性并不好控制，我们在里面多套一层div控制样式。
image.png
分开写必然有好多好处，在自己封装表格的时候发现表格的需求功能还是比较多的，而分开扩展功能会更方便扩展，并满足需求，如：固定表头，流体高度。
看antd的页面代码会发现前面简单的表格是没分开的，到固定表头功能时分开了，这样的话，可能写两套的渲染方法了。
分开后当有横向的滚动条时，滚动条是在tbody这一层的，thead要跟着滚动，则需监听滚动条让thead的滚动距离等于tbody的滚动距离。
bodyWrap.addEventListener('scroll', ()=>{
headerWrap.scrollLeft = bodyWrap.scrollLeft
}, false)
表格封装固定列会是个难点之一。
image.png
图中代码可以看出，它套了2层的table，再使用设置显示宽度和定位的布局让一个table固定在左边。此时的竖向滚动条是table1的，鼠标在table2的时候不能滚动，监听table2的鼠标滚轮事件，然后把滚动距离赋值给table1，这就是elementUI鼠标在固定列时滚动没有平滑效果的原因吧。这里可以参考antd的布局，让父的宽度小于tbody的滚动条宽度，在父级overflow: hidden;就把滚动条遮掉了。
