html td高度自适应,Element Table 自适应高度解决方案

本文详细介绍了如何解决Element Table在不同屏幕尺寸下表头固定及高度自适应的问题。通过设置height属性实现表头固定,再通过动态计算父节点高度并考虑padding值,确保在窗口大小改变时仍能保持良好适配,避免滚动条冗余。最后,提供了完整的代码示例以供参考。
摘要由CSDN通过智能技术生成

分析

如下图(此方案中使用的是Element Table官网copy的代码(多用于OA, CMS, ERP这类系统中)

488adbc3b27c56c352d0de328d7d1372.gif

如上图大体目前没有问题,但是存在细节问题那就是在table在滚动的过程中表头没有了

如果说这里的列比较多,用户需要查看的数据在最后面,每次某个列的数据对应的是什么意思(尤其是表格数字比较多的话,非常恼火),需要上下来回滚动table 内容才能解决

所以说我们要解决的就是表头固定 ①(标记问题)

表头固定简单 官方提供prop => height,那继续看下图

dd595b6af8edf887e5a0d93ce1b1917e.png

我们的用户群在使用产品的过程中, 不可能说是固定用同样大小屏幕

假设我们这里设置了固定高度600px

那有些用户使用过程中 将窗口缩小了 不够600px

就会出现 table的body中一个滚动条 table外面的容器出现一个滚动条

还有就是有些用户使用的是大屏幕,很显然600px可能只占了他屏幕的一半,这里数据又多

就又出现新的问题,明明我屏幕可以显示完,产品这里只占了一半 然后开始滚动

所以新的问题高度如何设置,才能使我们适应各种用户②

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值