React：Table 那些事（3-2）—— 斑马纹、固定表头

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

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

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

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

1. 数据行的斑马纹效果

2. 固定表头

1. 斑马纹 - UI 效果

斑马纹

就是指隔行换色

2. 斑马纹 - API 接口

在 <Table> 组件上扩充

stripe 属性控制斑马纹效果

3. 斑马纹 - 代码实现

结构性伪类选择器

nth-child、nth-of-type

就能轻松搞定这个需求

下面实现复杂一些的

固定表头效果

4. 固定表头 - UI 效果

固定表头就是

当表体有竖向滚动条且[竖向]滚动时

表头固定不动的效果

5. 固定表头 - API 接口

固定表头通常是 表格高度控制的附加效果

6. 固定表头 - 注意事项

【第一】

固定表头是动态效果

由 Table 高度、数据量共同作用

【第二】

数据区出现竖向滚动条时

表头、表尾必须留出滚动条宽度

否则会出现列对不齐现象

【第三】

表头、表体、表尾由独立结构组成

当表体区域横向滚动时

表头、表尾要能够同步滚动

【第四】

在 Table 尺寸动态变化时

（比如：浏览器缩放）

上述三条也需要成立

7. 固定表头 - 代码实现

【第一】

表头、表体、表尾

的同步横向滚动通过 onScroll 实现

【第二】

动态计算表体是否存在竖向滚动条

决定是否在表头中增加 gutter

避免表头、表体对不齐

为了保持表头、表体能自然对齐

并且充分利用 <table> 的 css 特性

所以 gutter 独立于 header 存在

并利用 BFC 特性固定于右侧

效果展示