NG-ZORRO 分组表头 nzWidthConfig 列宽设置

已于 2022-03-02 11:42:07 修改
阅读量910 收藏 1
点赞数
分类专栏： 笔记 文章标签： javascript angular
于 2022-03-02 11:41:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CXY_BOY/article/details/123225893
版权

NG-ZORRO 分组表头 nzWidthConfig 列宽设置
本以为 挺简单的 结果样式 一直有问题 百度 上的文章 也不太好 ，只好 花时间 尝试一下

nzWidthConfig 属性配置
在这里插入图片描述

nzWidthConfig ="[‘300px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’]"

这里提醒一下： 单独的 单元格 nzWidth 属性 调整列宽 在分组表头中不建议使用 问题一堆

CXY_BOY
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ng-zorro-antd 入门初体验
10-17
主要介绍了ng-zorro-antd 入门初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
NG-ZORRO组件nz-table表头有分组时设置nzWidth不生效
weixin_51288669的博客
04-26 222
在nztable组件里使用nzWidthConfig可动态设置列宽。
table表格列宽动态调整方案
m0_60909731的博客
07-11 2876
在做表格的时候，设置好的列宽却因为数据太长导致换行，想让它自己调整宽度，但是现在elementUI组件好像还没有这个功能。所以自己写了一个方法实现它。该方法实现了自适应列内容长度不换行，另外改变字体大小也会改变列宽，也实现了自适应字体大小列宽调整。 这个方法的思路是将列数据拆成单个字母或者单个中文字或其他单个符号放入数组中，对不同类型设置不同宽度，接着算出所有列数据的宽度，取最大宽度的一个设置为表格列宽。 使用方式 这里使用的是elementUI,别的ui组件需要表格列下的width属性能动态赋值。先把这个
nz-table中设置nzWidth遇到的问题
城南蝈蝈
12-29 1219
原文链接：这里 0.背景 本文组件：Ant Design of Angular 7.5.x 有一个比较长的报表需要展示，大概是下面这个样子，表头包含多行。 然后问题来了。 问题1：没有数据的情况下，表头不能滑动。然后加上数据试下效果： 结果更差，因为数据长度原因导致单元格超出长度了，结果就是数据和表头不对应的情况。而且还没有滑动。 上面这段错误的代码如下： <nz-card class="mt-md"> <nz-table [nzData]="listOfData" #taskTa
angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件
tangdou369098655的博客
05-05 2658
首先来说屏幕自适应 HTML <div class="container right_table"> <nz-table #basicTable nzBordered [nzData]="datas" [nzScroll]="{ x: datasTh.length*180 + 360+'px', y: '235px' }" [nzTotal]="topTable.total" [nzPageSize]="topTable.pageSize" [nzPageIndex]="to
修改ng-zorro中table对齐及宽度等细节
web
06-03 3347
在angular项目里使用antd组件库的table组件 1、改变对齐方式 ::ng-deep th, td { text-align: center; } 2、修改宽度 代码： <th [nzWidth]="'10%'">年份</th> <th [nzWidth]="'10%'">ccc</th> <th [nzWidth]="'400px'"
ng-zorro 的 th[nzWidth]逻辑链
好好学习，天天向上 ～
11-28 143
th.directive.ts: tr.directive.ts table.component.ts
修改ng-zorro中table的宽度
web
07-30 2754
之前修改ng-zorro中的表格宽度都是用[nzWidth]来修改，但[nzWidth]是用在th上的，有时我们不用th，直接用td了，这时就不好修改了。故，介绍另一种方法：[nzWidthConfig] 官方介绍 具体网站：https://ng.ant.design/components/table/zh#api 具体例子 html: <nz-table nzTemplateMode nzBordered [nzWidthConfig]=tab3> <thead>
https://ng.ant.design/组件的坑
weixin_44817180的博客
08-27 408
1.table 1.1 如果不给table的th加nzWidth，放大缩小浏览器窗口时，列的宽度回不到原始的样式，会保留放大时的px。 解决办法：在th中加nzWidth的百分比形式。 <th nzWidth="25%"> 2.2 虚拟滚动： 2.2.1.滚动到最下边时，有可能加载不到最后几条的数据（未解决） 2.2.2. 滚动到指定行，在IE中会报错scrollTo未定义。滚动到最后一条数据时，数据显示一半，滚动条没有达到最低端。 2.select 其中的select 多选时在IE中会报错
ngzorro中表格colspan合并
qq_40811733的博客
08-30 434
angular,antd,colspan合并
任意改变table表格td的宽度 支持表格TD拖拽
09-01
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
关于angular引入ng-zorro的问题浅析
10-14
主要给大家介绍了关于angular引入ng-zorro的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
angular6-ng-zorro-admin:angular6 + ng-zorro
05-14
为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng ...
abp-ng-zorro：asp.net的ng-zorro模板为零
02-01
关于该项目使用ng-zorro-antd v9.x（ ）作为前端模板。 与ASP.NET零模板v8.9 +兼容。用法项目模板。 （必须先购买。） 将模板aspnet-core文件夹复制到该项目。 运行MyCompanyName.AbpZeroTemplate.Web.Host项目。...
Angular中使用ng-zorro图标库部分图标不能正常显示问题
10-17
主要介绍了Angular中使用ng-zorro图标库部分图标不能正常显示问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Angular ng-zorro-antd nz-form-label 字数不同导致不对齐，设定统一宽度
chanchaw的专栏
07-12 3867
nzFormLabel 字数不同导致不对齐 nz-form-label 文字个数不同，即使通过 [nzSpan] 设置宽度也没有效果会出现下面的效果 - 不对齐 可以看出如果第一行的 交期 如果是4个字就会和下面的 销售类型 对齐 下面介绍如何解决 第一种方法：自定义类设置<nz-form-label> 的宽度 设置后如下图 第二种方法：使用官方提供的类 最终也是测...
Ng-zorro组件Table样式修改笔记
weixin_45680024的博客
10-30 985
Ng-zorro组件Table样式修改笔记 由于 Ng-zorro组件样式修改复杂，为了以后高效开发，记录一下，相关代码如下 /* 表头样式 */ .table /deep/ .ant-table-thead>tr>th { text-align: center; background: #30494d; color: #ffffff; padding: 0.8%; border-bottom: none; font-size: 1em; } /* 表格主体样式 */ .
table不设置宽度，一行显示，超出使用省略号
cfc0075的博客
07-19 1442
table不设置宽度，一行显示，超出部分使用省略号。 <style> table{ table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 *...
nzTable可变列头宽度不生效问题
wwsinsh的博客
11-17 1166
使用ng-zorro-antd控件的nzTable, 可变列头宽度不生效问题问题描述解析问题解决方案 问题描述 项目中使用nztable设计了一个日历，日历的的表头是月份，每个月的天数是变化的，而且需求还要求可以隐藏某些天数，此时表头的宽度需要根据天数变化，nzwidth的设置需要计算得到 当显示完整天数时无异常（天数较多，可铺满显示区域）； 当隐藏掉某些天数的时候表头仍然铺满； 解析问题 通过debug抓取界面元素发现，成功隐藏的body部分其实最后仍然铺满屏幕，联想到蚂蚁库中的描述：列头与内容不对齐
ng-zorro-antd 自定义组件
最新发布
04-30
ng-zorro-antd 是基于 Angular 开发的一款 UI 框架，提供了丰富的基础组件和样式，可以快速开发出美观、易用的 web 应用程序。同时，ng-zorro-antd 也支持自定义组件。 首先，我们需要理解组件的基本概念。组件是 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CXY_BOY

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值