React：Table 那些事（3-3）—— 列宽自适应、列宽拖动

《React：Table 那些事》系列文章，会逐渐给大家呈现一个基于 React 的 Table 组件的定义、设计、开发过程。每篇文章都会针对 Table 的某个具体功能展开分析：

• 要实现什么功能？
• 接口如何定义？
• 功能如何实现（HTML结构、CSS效果）？
• 有什么常见问题？如何解决？
• 性能调优？注意事项？

这个即将诞生的 React Table 组件，就命名为 webj2ee-table。

这一篇实现 webj2ee-table 的2个功能

1. 列宽自适应

2. 列宽拖动

1. 列宽自适应

1.1. 如何自适应？

• 表格的列可以手动配置宽度；

• 若各列的宽度和 < 表格可视区宽度，则多余的空间平均分配到各列；
• 若各列的宽度和 > 表格可视区宽度，则各列宽度不变，横向出滚动条；
• 当表格动态缩放时，上述条件同样满足；

1.2. 实现策略？

HTML 中 <table> 的固定布局模型

就符合上述规则，无需特殊处理

—— https://www.w3.org/TR/CSS22/tables.html#fixed-table-layout

1.3. 核心代码实现

1.4. 效果展示

2. 列宽拖动

2.1. 采用什么技术？

核心是“拖动”效果

选用市面上主流的 resize 插件即可

例如：react-resizable

2.2. 代码实现？

2.3. 效果展示