前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React:Table 那些事(3-2)—— 斑马纹、固定表头

React:Table 那些事(3-2)—— 斑马纹、固定表头

作者头像
WEBJ2EE
发布2019-07-19 12:18:29
3.9K0
发布2019-07-19 12:18:29
举报
文章被收录于专栏:WebJ2EE

《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 特性固定于右侧

效果展示

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档