nz-table中设置nzWidth遇到的问题
原文链接:这里
0.背景
本文组件:Ant Design of Angular 7.5.x
有一个比较长的报表需要展示,大概是下面这个样子,表头包含多行。
然后问题来了。
问题1:没有数据的情况下,表头不能滑动。然后加上数据试下效果:
结果更差,因为数据长度原因导致单元格超出长度了,结果就是数据和表头不对应的情况。而且还没有滑动。
上面这段错误的代码如下:
<nz-card class="mt-md"><nz-table [nzData]="listOfData" #taskTable nzBordered='true' [nzFrontPagination]="false" [nzScroll]="scrollConfig"><thead><!-- 第一行 --><tr><th rowspan="3">行业</th><th rowspan="3">单位名称</th><th rowspan="3">统一代码</th><th colspan="7">统计值1</th><th colspan="8">统计值2</th><th colspan="3">统计值3</th><th colspan="3">统计值4</th><th colspan="4">统计值5</th><th colspan="4">统计值6</th><th rowspan="3">数据1</th><th rowspan="3">数据2</th><th rowspan="3">数据3</th><th rowspan="3">数据4</th><th rowspan="3">数据5</th><th rowspan="3">数据6</th><th rowspan="3">数据7</th><!-- <th nzRight="0px">操作</th> --></tr><!-- 第二行 --><tr><th rowspan="2">2015年</th><th rowspan="2">2015年</th><th rowspan="2">2018年</th><th colspan="2">2019年</th><th colspan="2">2020年</th><th rowspan="2">指标名称</th><th rowspan="2">2015年(政府值)</th><th rowspan="2">2015年</th><th rowspan="2">2018年</th><th colspan="2">2019年</th><th colspan="2">2020年</th><th rowspan="2">指标名称</th><th rowspan="2">审计值</th><th rowspan="2">限额</th><th rowspan="2">淘汰设备</th><th rowspan="2">低能效设备</th><th rowspan="2">空压机</th><th rowspan="2">数量</th><th rowspan="2">总数量(个)</th><th rowspan="2">投资额(万元)</th><th rowspan="2">节能量(tce)</th><th colspan="2">2019年</th><th colspan="2">2020年</th></tr><!-- 第三行 --><tr><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>能耗总量(tce)</th><th>节能目标</th><th>能耗总量(tce)</th><th>节能目标</th></tr></thead><tbody></tbody></nz-table>
</nz-card>
1.解决办法
尝试了好多办法,最终试了加nzWidth,然后给每个th加上 100px之后的效果:
数据可以滚动了,但是还是对不齐,而且后面空出了一大块,肯定是nzWidth的问题。
然后这一段错误的代码如下:
<nz-card class="mt-md"><nz-table [nzData]="listOfData" #taskTable nzBordered='true' [nzFrontPagination]="false" [nzScroll]="scrollConfig"><thead><!-- 第一行 --><tr><th nzWidth="100px" rowspan="3">行业</th><th nzWidth="100px" rowspan="3">单位名称</th><th nzWidth="100px" rowspan="3">统一代码</th><th nzWidth="100px" colspan="7">统计值1</th><th nzWidth="100px" colspan="8">统计值2</th><th nzWidth="100px" colspan="3">统计值3</th><th nzWidth="100px" colspan="3">统计值4</th><th nzWidth="100px" colspan="4">统计值5</th><th nzWidth="100px" colspan="4">统计值6</th><th nzWidth="100px" rowspan="3">数据1</th><th nzWidth="100px" rowspan="3">数据2</th><th nzWidth="100px" rowspan="3">数据3</th><th nzWidth="100px" rowspan="3">数据4</th><th nzWidth="100px" rowspan="3">数据5</th><th nzWidth="100px" rowspan="3">数据6</th><th nzWidth="100px" rowspan="3">数据7</th><!-- <th nzRight="0px">操作</th> --></tr><!-- 第二行 --><tr><th nzWidth="100px" rowspan="2">2015年</th><th nzWidth="100px" rowspan="2">2015年</th><th nzWidth="100px" rowspan="2">2018年</th><th nzWidth="100px" colspan="2">2019年</th><th nzWidth="100px" colspan="2">2020年</th><th nzWidth="100px" rowspan="2">指标名称</th><th nzWidth="100px" rowspan="2">2015年(政府值)</th><th nzWidth="100px" rowspan="2">2015年</th><th nzWidth="100px" rowspan="2">2018年</th><th nzWidth="100px" colspan="2">2019年</th><th nzWidth="100px" colspan="2">2020年</th><th nzWidth="100px" rowspan="2">指标名称</th><th nzWidth="100px" rowspan="2">审计值</th><th nzWidth="100px" rowspan="2">限额</th><th nzWidth="100px" rowspan="2">淘汰设备</th><th nzWidth="100px" rowspan="2">低能效设备</th><th nzWidth="100px" rowspan="2">空压机</th><th nzWidth="100px" rowspan="2">数量</th><th nzWidth="100px" rowspan="2">总数量(个)</th><th nzWidth="100px" rowspan="2">投资额(万元)</th><th nzWidth="100px" rowspan="2">节能量(tce)</th><th nzWidth="100px" colspan="2">2019年</th><th nzWidth="100px" colspan="2">2020年</th></tr><!-- 第三行 --><tr><th nzWidth="100px" >数量</th><th nzWidth="100px">是否完成</th><th nzWidth="100px">数量</th><th nzWidth="100px">是否完成</th><th nzWidth="100px">数量</th><th nzWidth="100px">是否完成</th><th nzWidth="100px">数量</th><th nzWidth="100px">是否完成</th><th nzWidth="100px">能耗总量(tce)</th><th nzWidth="100px">节能目标</th><th nzWidth="100px">能耗总量(tce)</th><th nzWidth="100px">节能目标</th></tr></thead></nz-table>
</nz-card>
2.问题的解决与验证
我本来以为以表头的最小维度设置宽度(比如 “数量”、”自动完成”这种字段)可以自动撑开上一级的表格,结果还是不行。然后开始尝试了漫长的尝试之路。先试了下前几个自动:
<tr><th nzWidth="100px" rowspan="3">行业</th><th nzWidth="100px" rowspan="3">单位名称</th><th nzWidth="100px" rowspan="3">统一代码</th><th nzWidth="100px" colspan="7">统计值1</th><th colspan="8">统计值2</th><th colspan="3">统计值3</th><th colspan="3">统计值4</th><th colspan="4">统计值5</th><th colspan="4">统计值6</th><th rowspan="3">数据1</th><th rowspan="3">数据2</th><th rowspan="3">数据3</th><th rowspan="3">数据4</th><th rowspan="3">数据5</th><th rowspan="3">数据6</th><th rowspan="3">数据7</th></tr>
然后给 ”统计值2“ 设置nzWidth:
<tr><th nzWidth="100px" rowspan="3">行业</th><th nzWidth="100px" rowspan="3">单位名称</th><th nzWidth="100px" rowspan="3">统一代码</th><th nzWidth="100px" colspan="7">统计值1</th><th nzWidth="100px" colspan="8">统计值2</th><th colspan="3">统计值3</th><th colspan="3">统计值4</th><th colspan="4">统计值5</th><th colspan="4">统计值6</th><th rowspan="3">数据1</th><th rowspan="3">数据2</th><th rowspan="3">数据3</th><th rowspan="3">数据4</th><th rowspan="3">数据5</th><th rowspan="3">数据6</th><th rowspan="3">数据7</th></tr>
然后发现不理解的事,下面的”2015年“这个字段的宽度变了?我明明是加的 ”统计值2“这个字段啊。
好吧,继续尝试,我把标题第二行第一个 (”2015“这个字段) 加入了宽度100px。
<thead><!-- 第一行 --><tr><th nzWidth="100px" rowspan="3">行业</th><th nzWidth="100px" rowspan="3">单位名称</th><th nzWidth="100px" rowspan="3">统一代码</th><th nzWidth="100px" colspan="7">统计值1</th><th nzWidth="100px" colspan="8">统计值2</th><th colspan="3">统计值3</th><th colspan="3">统计值4</th><th colspan="4">统计值5</th><th colspan="4">统计值6</th><th rowspan="3">数据1</th><th rowspan="3">数据2</th><th rowspan="3">数据3</th><th rowspan="3">数据4</th><th rowspan="3">数据5</th><th rowspan="3">数据6</th><th rowspan="3">数据7</th></tr><!-- 第二行 --><tr><th nzWidth="100px" rowspan="2">2015年</th><th rowspan="2">2015年</th><th rowspan="2">2018年</th><th colspan="2">2019年</th><th colspan="2">2020年</th><th rowspan="2">指标名称</th><th rowspan="2">2015年(政府值)</th><th rowspan="2">2015年</th><th rowspan="2">2018年</th><th colspan="2">2019年</th><th colspan="2">2020年</th><th rowspan="2">指标名称</th><th rowspan="2">审计值</th><th rowspan="2">限额</th><th rowspan="2">淘汰设备</th><th rowspan="2">低能效设备</th><th rowspan="2">空压机</th><th rowspan="2">数量</th><th rowspan="2">总数量(个)</th><th rowspan="2">投资额(万元)</th><th rowspan="2">节能量(tce)</th><th colspan="2">2019年</th><th colspan="2">2020年</th></tr><!-- 第三行 --><tr><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>能耗总量(tce)</th><th>节能目标</th><th>能耗总量(tce)</th><th>节能目标</th></tr></thead>
更加神奇的事情来了,如下:
标题中的”数量“以及数据中的”否“ 竟然有了宽度。
虽然不知道为什么,但是到现在大概可以猜出来,宽度的设置不是按照最小字段进行展示的,似乎是按照th的个数顺次展示(因为图片上两个有宽度的 开始和结尾中间隔了11个最小单位,而代码里面的th也是隔了11个th。)
那么是不是意味着我只要从头开始写nzWidth=”100px”, 顺序写满数据的字段数就行,而不用纠结到底要写在什么位置。
验证:
<thead><!-- 第一行 --><tr><th nzWidth="100px" rowspan="3">行业</th><th nzWidth="100px" rowspan="3">单位名称</th><th nzWidth="200px" rowspan="3">统一代码</th><th nzWidth="100px" colspan="7">统计值1</th><th nzWidth="100px" colspan="8">统计值2</th><th nzWidth="100px" colspan="3">统计值3</th><th nzWidth="100px" colspan="3">统计值4</th><th nzWidth="100px" colspan="4">统计值5</th><th nzWidth="100px" colspan="4">统计值6</th><th nzWidth="100px" rowspan="3">数据1</th><th nzWidth="100px" rowspan="3">数据2</th><th nzWidth="100px" rowspan="3">数据3</th><th nzWidth="100px" rowspan="3">数据4</th><th nzWidth="100px" rowspan="3">数据5</th><th nzWidth="100px" rowspan="3">数据6</th><th nzWidth="100px" rowspan="3">数据7</th><th nzWidth="100px" rowspan="3">数据8</th></tr><!-- 第二行 --><tr><th nzWidth="100px" rowspan="2">2015年</th><th nzWidth="100px" rowspan="2">2015年</th><th nzWidth="100px" rowspan="2">2018年</th><th nzWidth="100px" colspan="2">2019年</th><th nzWidth="100px" colspan="2">2020年</th><th nzWidth="100px" rowspan="2">指标名称</th><th nzWidth="100px" rowspan="2">2015年(政府值)</th><th nzWidth="100px" rowspan="2">2015年</th><th nzWidth="100px" rowspan="2">2018年</th><th nzWidth="100px" colspan="2">2019年</th><th nzWidth="100px" colspan="2">2020年</th><th nzWidth="100px" rowspan="2">指标名称</th><th nzWidth="100px" rowspan="2">审计值</th><th nzWidth="100px" rowspan="2">限额</th><th nzWidth="100px" rowspan="2">淘汰设备</th><th nzWidth="100px" rowspan="2">低能效设备</th><th nzWidth="100px" rowspan="2">空压机</th><th nzWidth="100px" rowspan="2">数量</th><th nzWidth="100px" rowspan="2">总数量(个)</th><th nzWidth="100px" rowspan="2">投资额(万元)</th><th nzWidth="100px" rowspan="2">节能量(tce)</th><th nzWidth="100px" colspan="2">2019年</th><th nzWidth="100px" colspan="2">2020年</th></tr><!-- 第三行 --><tr><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>数量</th><th>是否完成</th><th>能耗总量(tce)</th><th>节能目标</th><th>能耗总量(tce)</th><th>节能目标</th></tr></thead>
效果:
暂时完成了,但是不理解。。。。。
5.后记
其实,按照上面那面写还是会有一些问题,最明显的问题,当数据过大时,还是会把单元格给撑开,可以考虑加入百分比。
另外,当没有数据的情况下可以滑动看表头的功能暂时没有实现。
nz-table中设置nzWidth遇到的问题相关推荐
- [转]table中设置tr行间距
原文地址:https://blog.csdn.net/itmyhome1990/article/details/50475616 CSS border-collapse 属性设置表格的边框是否被合并为 ...
- table中设置tr行间距
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值 描述 separate 默认值.边框会被分开.不会忽略 border-spacing 和 empty-cell ...
- table中怎么设置两行间距
table中设置两行间距方法: css代码实现 <style> table { border-collapse: separate; border-spacing: 10px; } < ...
- 在PHP中给表格加上css样式,表格CSS样式设置 给table表格设置CSS样式表
表格table tr td CSS花色设置 给table表格设置CSS花式表 在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
- ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- [html] table中给td设置宽度无效怎么解决?
[html] table中给td设置宽度无效怎么解决? 默认是列宽度由单元格内容设定 table 添加css tableLayout :fixed; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识. ...
- [html] 如何给table中的某一列设置固定宽度
[html] 如何给table中的某一列设置固定宽度 table{ table-layout:fixed} table tr td:nth-child(n){width:100px} 个人简介 我是歌 ...
- html表格不随字数变化,设置table中的宽度不随文字改变让其固定
设置table中的宽度不随文字改变让其固定 来源:互联网作者:佚名时间:02-17 16:02:28[大 中 小] 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有 ...
- 设置table中的td宽度不同
类似站内短信的形式的一个table,想要的实现结果如下格式: 刚开始觉得"这里是名字"的td设置宽度为20%就可以了,代码如下: <table><tr class ...
最新文章
- Tomaso Poggio:深度学习需要从炼金术走向化学
- 【Flutter】Flutter 混合开发 ( Dart 代码调试 | Flutter 单独调试 | 混合模式下 Flutter 调试 )
- MATLAB Simulink如何实现S-Function builder功能
- 非常有用的User case用例描述模板
- QT显示框架嵌入Vs控制台工程
- html5访问本地资源,HTML5实现一个访问本地文件的实例今
- 【算法精讲】分享一道很不错的算法题
- 360、金山回应网页劫持 没守住商业底线
- WPS、EXCEL中输入公式F4插入绝对引用无反应的解决方法
- 转:谦逊不是罕见的美德,而是人人可习得的能力
- flac转mp3,flac格式如何转mp3
- android studio基础教程:2.程序在哪写
- Office Visio Project 2016下载地址
- 学习项目---文件查重
- 微信小程序的开发制作_搭建_工具_模板_一键生成
- opencv_模板匹配
- 一起学WEB HTML5 第1讲
- 如何选择漏电保护器规格型号_漏电保护器型号规格_漏电保护器的选用及注意事项...
- 面试官100%会问的软件测试面试题!!(必看)
- 计算机体系结构2030:未来15年的研究愿景*Mark Hill
热门文章
- 【JFreeChart】自定义蜘蛛网图生成带刻度三角雷达图 自定义文字风格 背景色
- wordpress留言板comments.php添加自定义字段,wordpress怎么通过自定义栏目添加字段
- 埃博拉病毒是一种计算机病毒,埃博拉病毒是什么(图文)
- (附源码)计算机毕业设计SSM音乐资源分享网站
- mysql怎么在一段时间区间内按照周分组,把属于一周的数据汇总在一起以及如何自定义周?
- 如何制作网页和电商官网的3D产品展示?
- axure如何实现跳转_Axure中继器实现APP中设置页面的各种列表
- linux内存--大内存页(大页)
- JS分布式流转基础学习
- node分布式(小鹿线)