html/css/js 制作可变尺寸的分叉表格流程图

1、首先，实现一个固定尺寸的表格流程图比较简单，如图所示。将几列表格中的后两列添加css的transform，即可实现如图效果。

2、困难在于，随着页面尺寸变化，表格宽度变化，transform的参数不是定值。这里需要用js实现运行时参数计算。为了计算tra荏鱿胫协nsform平移量，首先需要获取表格宽高。如图，获取 id 为resize-oracle的元素，使用clientWidth和clientHeight属性获取宽度高度。

5、将这个处理函数，用windows.addEventListener添加给res坡纠课柩ize事件。同时添加一个setInterval，以防resize之外的情形造成表格尺寸变化。再调用一下处理函数，用于初始化。表格流程图已经有了适应尺寸效果了。