ngZorro中table表格头和列不对齐

最新推荐文章于 2023-12-15 18:35:47 发布
最新推荐文章于 2023-12-15 18:35:47 发布
阅读量864 收藏 1
点赞数
分类专栏： 样式问题 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/an_Ran_/article/details/115675429
版权

情况描述：

表格的列是不固定的，目前已经设置了nzwidth，但是宽度并不是当前想要达到的效果，并且当列过多的时候会出现列不对齐的情况

解决办法：

设置scroll的width等于所有列宽之和

由于我的列是不固定的，所以给scroll.x设置一个变量，根据类的长度来动态的设置滚动的宽度

当设置了不同的列时，动态的跳转表格滚动的宽度

 

神山智洋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
修改ng-zorro中table对齐及宽度等细节
web
06-03 3367
在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中table的宽度
web
07-30 2781
之前修改ng-zorro中的表格宽度都是用[nzWidth]来修改，但[nzWidth]是用在th上的，有时我们不用th，直接用td了，这时就不好修改了。故，介绍另一种方法：[nzWidthConfig] 官方介绍 具体网站：https://ng.ant.design/components/table/zh#api 具体例子 html: <nz-table nzTemplateMode nzBordered [nzWidthConfig]=tab3> <thead>
Angular NG-ZORRO 解决 nz-table 加纵向滚动条表头和单元格不对齐的问题
android_zyf的博客
04-27 1691
1，添加style： ::ng-deep .ant-table-body table{ margin: 0% !important; } 2，通过 [nzScroll] 指定纵向滚动条及高度 <nz-table [nzScroll]="{ y: '280px' }"> </nz-table> 3，通过 [nzWidth] 指定th和td的宽度（我用的百分比） 我一共就五列，所以每列 20% <th style="width: 20%;"></th>
ng-zorro表格动态添加表头及表头分组
smallNut的博客
10-24 417
zorro表格动态添加表头及表头分组
nz-table的表头单元格合并与表格滚动冲突
最新发布
MockingBHM的博客
12-15 500
groupFakeData[0].data的长度，结合table的相关知识，我们得出结论：由于table会根据第一行的th元素生成对应数量的col，也就是说第一行的「表头分组」操作只生成了8个col，并不是生成32个col然后以4个为一组合并，并且每个col的宽度是tableWidth的宽度。上面我们提到，每个col的宽度会根据第一行th的宽度来生成，那么我们可以简化一下，只在第一行th写宽度就可以了。可以看到，跟我们理想的样子大相径庭，为什么会出现这样的效果？
关于antd table 表头与表格不对齐问题
halations的博客
09-29 3864
出现这个问题一般是设置了scroll属性 解决方法：给每个表头设置width，然后最后一个可以不设置，antd会自适应最后一个。 { title:'任务类型', dataIndex:'type', key:'type', width:90, }, 如果还没解决怎么办？ 可能出现的问题是因为render的值长度大于了外面设置的width 比如 { ...
bootstrap table列和表头对不齐的解决方法
10-16
在实际使用中，可能会遇到列和表头对不齐的问题，尤其是在设置了固定表格高度并出现滚动条的情况下。这种问题通常是由于数据列中的滚动条占据了额外的宽度，导致表头和数据列的div容器宽度不一致。 要解决Bootstrap...
Boostrap table 列头和内容不对齐问题，终极解决方案
01-10
利用一周的时间终于解决了，BootStrapTable 表格列头和内容不对其的问题。又需要的小伙伴来下载吧，替换原来的bootstrap-table.js即可
5种做法实现table表格中的斜线表头效果
09-28
table表格，这个东西大家肯定都不陌生，代码中我们时常都能碰到，那么给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？
解决Antd Table组件表头不对齐的问题
01-18
但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案： 1、对表格的每一行 【columns】设置width属性（留出一行进行...
angular ng-zorro中nz-table-table表格添加滚动条，表格错位
weixin_39436129的博客
01-23 4606
问题： 表格固定表头，增加滚动条，导致表格内列头和内容错位 解决办法 指定th的nzWidth属性 <nz-table [nzData]="targetData" [nzFrontPagination]="false" [nzShowPagination]="false" ...
ant table组件使用心得-表头不对齐解决办法
余光的博客
01-15 9693
实习期间遇到需要列表展示数据的需求，从ant开源库上拿下来示例代码如下 使用的场景时在react项目中，所有直接引入 一 使用 1.引入组件 import { Table } from ‘antd’; 2.手动写入需要渲染的数据 这里不细说了，在模版中，为你提供了很多种排列方式，有跨行显示，也有跨列显示 3.render中写table组件 &lt;Table columns={colu...
angular-zorro 下拉框长度超出解决
junjiahuang的博客
07-11 965
angular-zorro 下拉框长度超出解决，并统一滚动条样式 CSS滚动条选择器 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动条轨道. ::-webkit-scrollbar-track-pi
nzTable可变列头宽度不生效问题
wwsinsh的博客
11-17 1176
使用ng-zorro-antd控件的nzTable, 可变列头宽度不生效问题问题描述解析问题解决方案 问题描述 项目中使用nztable设计了一个日历，日历的的表头是月份，每个月的天数是变化的，而且需求还要求可以隐藏某些天数，此时表头的宽度需要根据天数变化，nzwidth的设置需要计算得到 当显示完整天数时无异常（天数较多，可铺满显示区域）； 当隐藏掉某些天数的时候表头仍然铺满； 解析问题 通过debug抓取界面元素发现，成功隐藏的body部分其实最后仍然铺满屏幕，联想到蚂蚁库中的描述：列头与内容不对齐
antd table 列头和内容不对齐
风华绝代的博客
12-27 1万+
我是在已经给 每一列设置了宽的时候，依然遇到了列头和内容不对齐的情况，最后经过查询，得到的是，给最后一列不设置宽度，让其自己伸缩，就可以解决这个问题了...
antd——table样式：表头和表体错位问题
yehaocheng520的博客
12-27 1万+
今天测试遇到一个问题，如下图所示：使用ant design vue的框架搭建的表格中，出现表头和表体出现错位的问题。 解决方法如下： 1.设置scroll——:scroll="{ y: 500, x: 1400 }" 主要是横向要设置，也就是x，y方向设置是为了固定表头。 2.设置columns——列宽度 <a-table :rowKey="(r, i) => i" :scroll="{ y: 500, x: 1400 }" :columns="column
antd table 表格错位的问题
热门推荐
风华绝代的博客
01-10 1万+
当遇到antdtable表格错位的时候，看文档，文档上说的是，要设置每一列的宽度，但是已经设置了，却还是错位。后来经过查找资料，发现最后一列就不用设置的话，就不会再错位，因为antd会自己给最后一列分配宽度。 在这里还遇到一个问题，就是当我们给列设置的宽度不合理的话（一般情况是设置的宽度较小），也会错位。这个时候，只需要调整宽度就好...
java使用aspose将表格中所有列与表头对齐
05-31
您可以使用Aspose.Words for Java来对齐表格中的所有列与表头。以下是一个示例代码片段，它可以将表格中所有列与表头居中对齐： ```java Document doc = new Document("input.docx"); // 获取文档中所有的表格 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值