html 表格 布局 源码,分析elementUI组件中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;就把滚动条遮掉了。