nzTable可变列头宽度不生效问题

使用ng-zorro-antd控件的nzTable, 可变列头宽度不生效问题

问题描述

项目中使用nztable设计了一个日历,日历的的表头是月份,每个月的天数是变化的,而且需求还要求可以隐藏某些天数,此时表头的宽度需要根据天数变化,nzwidth的设置需要计算得到

  1. 当显示完整天数时无异常(天数较多,可铺满显示区域);
  2. 当隐藏掉某些天数的时候表头仍然铺满;

解析问题

通过debug抓取界面元素发现,成功隐藏的body部分其实最后仍然铺满屏幕,联想到蚂蚁库中的描述:列头与内容不对齐或出现列重复,请指定固定列的宽度 [nzWidth]。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。 建议指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 nzScroll.x。 注意:固定列通过 sticky 实现,IE 11 会降级成横向滚动

解决方案

在Head中加入自动宽度列

<th nzLeft="0px" nzWidth="auto"></th>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值