修改ng-zorro中table的宽度

最新推荐文章于 2024-01-28 00:32:25 发布
最新推荐文章于 2024-01-28 00:32:25 发布
阅读量2.8k 收藏 4
点赞数 1
分类专栏： ng-zorro 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45158253/article/details/107694202
版权
本文介绍了如何在ng-zorro中灵活调整表格宽度，包括官方提供的API使用和一个具体的例子，帮助解决在不使用时无法修改宽度的问题。
摘要由CSDN通过智能技术生成

之前修改ng-zorro中的表格宽度都是用[nzWidth]来修改，但[nzWidth]是用在th上的，有时我们不用th，直接用td了，这时就不好修改了。故，介绍另一种方法：[nzWidthConfig]

官方介绍

在这里插入图片描述
具体网站：https://ng.ant.design/components/table/zh#api

具体例子

html:

<nz-table nzTemplateMode nzBordered [nzWidthConfig]=tab3>
   <thead>
         <tr>
           <th>Company</th>
           <th>Contact</th>
           <th>Country</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>Alfreds Futterkiste</td>
           <td>Maria Anders</td>
           <td>Germany</td>
         </tr>
         <tr>
           <td&g
最低0.47元/天 解锁文章
蒲公英
关注
专栏目录
任意改变table表格td的宽度 支持表格TD拖拽
09-01
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
ngx-datatable 自动改变宽度 resize recalculate
fdsjiaoDoctor的博客
07-28 579
import { DatatableComponent } from "@swimlane/ngx-datatable"; import {AfterContentChecked, ChangeDetectorRef, Directive} from "@angular/core"; @Directive({ selector: '[ngx-resize-watcher]' }) export class NgxResizeWatcherDirective implements AfterContent.
ngzorro表格列拖动修改宽度
小甜甜专栏
04-12 2376
访问地址：https://zhtt.gitee.io/angular-demo/ng-zorro/dist/ng-zorro/#/list/drag-table 安装依赖 npm i great-ngform --save 导入模块 import {GreatDirectiveModule} from "great-ngform"; 在需要拖拽的组件中初始化宽度 grea...
nzTable可变列头宽度不生效问题
wwsinsh的博客
11-17 1220
使用ng-zorro-antd控件的nzTable, 可变列头宽度不生效问题问题描述解析问题解决方案 问题描述 项目中使用nztable设计了一个日历，日历的的表头是月份，每个月的天数是变化的，而且需求还要求可以隐藏某些天数，此时表头的宽度需要根据天数变化，nzwidth的设置需要计算得到 当显示完整天数时无异常（天数较多，可铺满显示区域）； 当隐藏掉某些天数的时候表头仍然铺满； 解析问题 通过debug抓取界面元素发现，成功隐藏的body部分其实最后仍然铺满屏幕，联想到蚂蚁库中的描述：列头与内容不对齐
ngZorro中table表格头和列不对齐
an_Ran_的博客
04-13 928
情况描述： 表格的列是不固定的，目前已经设置了nzwidth，但是宽度并不是当前想要达到的效果，并且当列过多的时候会出现列不对齐的情况 解决办法： 设置scroll的width等于所有列宽之和 由于我的列是不固定的，所以给scroll.x设置一个变量，根据类的长度来动态的设置滚动的宽度 当设置了不同的列时，动态的跳转表格滚动的宽度 ...
修改ng-zorro中table对齐及宽度等细节
web
06-03 3470
在angular项目里使用antd组件库的table组件 1、改变对齐方式 ::ng-deep th, td { text-align: center; } 2、修改宽度 代码： <th [nzWidth]="'10%'">年份</th> <th [nzWidth]="'10%'">ccc</th> <th [nzWidth]="'400px'"
nz-table中设置nzWidth遇到的问题
城南蝈蝈
12-29 1356
原文链接：这里 0.背景 本文组件：Ant Design of Angular 7.5.x 有一个比较长的报表需要展示，大概是下面这个样子，表头包含多行。 然后问题来了。 问题1：没有数据的情况下，表头不能滑动。然后加上数据试下效果： 结果更差，因为数据长度原因导致单元格超出长度了，结果就是数据和表头不对应的情况。而且还没有滑动。 上面这段错误的代码如下： <nz-card class="mt-md"> <nz-table [nzData]="listOfData" #taskTa
NG-ZORRO 分组表头 nzWidthConfig 列宽设置
CXY_BOY的博客
03-02 1037
NG-ZORRO 分组表头 nzWidthConfig 列宽设置 本以为 挺简单的 结果样式 一直有问题 百度 上的文章 也不太好 ，只好 花时间 尝试一下 nzWidthConfig 属性配置 nzWidthConfig ="[‘300px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’, ‘120px’]" 这里提醒一下： 单独的 单元格 nzW
ng-zorro 的 th[nzWidth]逻辑链
好好学习，天天向上 ～
11-28 161
th.directive.ts: tr.directive.ts table.component.ts
NG-ZORRO组件nz-table表头有分组时设置nzWidth不生效
weixin_51288669的博客
04-26 281
在nztable组件里使用nzWidthConfig可动态设置列宽。
angular2页面抓取_如何在Angular2中获取（DOM）元素的宽度
weixin_39785723的博客
12-18 1096
有一些类似的线程，但我找不到合适的答案 满足我的需求。因此，应该严格避免直接DOM访问 in angular2我只是想知道这是什么最佳实践。如何在Angular2中获取(DOM)元素的宽度我想要实现的是基于当前宽度的元素大小。workitemresize.component.tsimport { Directive, ElementRef, HostListener, Renderer, Inpu...
关于angular引入ng-zorro的问题浅析
10-14
`--save`参数会把ng-zorro-antd记录在package.json文件的dependencies中，这样在后续的开发环境中，ng-zorro-antd将被自动管理。 接下来，需要在项目的核心模块`app.module.ts`中导入`NgZorroAntdModule`。这一步至...
Angular中使用ng-zorro图标库部分图标不能正常显示问题
10-17
在Angular开发过程中，使用ng-zorro作为前端UI框架时，可能会遇到部分图标无法正常显示的问题。这通常是由于未正确导入和注册图标导致的。ng-zorro图标库包含了大量的图标资源，但默认情况下，ng-alain项目仅预导入...
ng-zorro-antd:修改源代码的antd-修改
03-24
吴佐罗 基于Ant Design和Angular的企业级UI组件。版本 1.x（支持Angular 6.x和Ant Design 3.x）即将发布0.7.x（支持Angular 5.x和Ant Design 3.x）当前... $ npm install ng-zorro-antd --save$ yarn add ng-zorro-a
demo-ng-zorro-antd:基于ng-zorro-antd的后台管理系统，支持国际化
03-11
Demo-ng-Zorro-antd 示例运行步骤： 克隆到本地 ：文件夹 安装依赖包： npm install 本地运行： npm start ：浏览器输入地址： http://localhost:4200 屏幕截图 支持国际化，中英文切换
ng-zorro-antd-demo:基于阿里巴巴ng-zorro-antd写的后台管理系统模版，后台采用spring cloud实现
03-11
如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module...
angular ngzorro 表格用自定义指令实现自由缩放列宽
Beauty_zhang666的博客
08-24 1171
angular+ngzorro table 自定义指令实现表格自由伸缩列宽
angular-zorro 下拉框长度超出解决
junjiahuang的博客
07-11 981
angular-zorro 下拉框长度超出解决，并统一滚动条样式 CSS滚动条选择器 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动条轨道. ::-webkit-scrollbar-track-pi
Ng-zorro组件库实现表格新增行 删除行 新增图片 同上选择逻辑
最新发布
m0_63586335的博客
01-28 288
我使用的是angular和Ng-zorro组件库实现。给每一行上传不同数量的图片。
ng-zorro中table设置行内容超出隐藏
05-28
要在 ng-zorro 中设置 table 行内容超出隐藏，可以使用 CSS 样式来实现。 首先，在对应的行元素上添加 `text-overflow: ellipsis;` 样式来实现文字超出部分省略号显示。 然后，需要设置行元素的宽度和 `overflow: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值