bug单:

https://github.com/ant-design/ant-design/issues/13825

1.设置固定宽度:在columns中设置widht或者className

{
title: '年龄',
dataIndex: 'age',
key: 'age',
//width: 100,
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
//width: 200,
}

2.用可展开的table,布局会好看很多

3.动态生成dom:

columns={[
...
render: (text, record) => (
<div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
{text}
</div>
),
]}

4.设置样式:

  .ant-table-fixed {
table-layout: fixed;
} .ant-table-tbody > tr > td {
word-wrap: break-word;
word-break: break-all;
}
.ant-table-tbody > tr > td {
white-space: nowrap;
}
.ant-table-thead > tr > th{
white-space: nowrap;
}
.ant-table-thead tr {
display: flex;
}
.ant-table-thead th {
flex: 1;
}
.ant-table-row {
display: flex;
}
.ant-table-row td {
flex: 1;
overflow: auto;
}
.ant-table-row td::-webkit-scrollbar {
display: none;
}
.columns {
display: flex;
align-items: center;
width: 0;
}

5.宽度不够:

scroll={{ x: true }}
:scroll="columns.length>0?{ x: '130%' }:{}"

6.样式设置:强制换行

//添加word-wrap:break-word时(只对那些超出容器宽度的单词进行拆分,而不影响其他正常单词。)

    <div style="width:150px;height:70px;background:red;word-wrap:break-word">
I am a good boy, hahahahhahahahahahaha everyone likes me...
</div>
//添加word-break:break-all时(拆分所有单词)

    <div style="width:150px;height:70px;background:red;word-break:break-all">
I am a good boy, hahahahhahahahahahaha everyone very likes me...
</div></span>

设置文字省略:

style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
.textOverflow{
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important;
max-width: 118px;
}

antd-table——内容展示变型的更多相关文章

  1. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  2. 如何实现 antd table 自动调整可视高度(纵向滚动条,scrollY)

    一.事情的起因 最近在做的项目中有大量的表格,正常的表格高度是没有限制的,数据量很大的时候会出现表格内容以及分页信息超出可视窗口, 为了查看超出的部分就需要滚动页面但是这样就会把查询条件等信息滚出可视 ...

  3. 使用 antd Table组件, 异步获取数据

    使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...

  4. react antd Table动态合并单元格

    示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...

  5. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  6. 微信小程序小技巧系列《二》show内容展示,上传文件编码问题

    作者:gou-tian 来自:github show内容展示 尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现 写的更少,做的更多 篇幅有限详细代码此 ...

  7. 使用NPOI将TABLE内容导出到EXCEL

    项目中需要将页面中的table内容导出到EXCEL,在用了几种方法后发现NPO是最快&最好的 需要应用 NPOI.dll 还有个Ionic.Zip.dll不知道有用没,没去研究,两个DLL都放 ...

  8. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

  9. JS table内容转成二维数组,支持colspan和rowspan

    思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...

随机推荐

  1. Python自动化脚本-运维人员宝典

    文章地址: https://alanhou.org/basic-networking-socket-programming/ 第一章 Python脚本概述 第二章 Python脚本调试和性能测试 第三 ...

  2. centos7 docker swarm加入集群失败

    提示的错误为 [root@localhost downloads]# docker swarm join --token SWMTKN-1-2ezr0k5ybds1la4vgi2z7j8ykxkmm0 ...

  3. TensorFlow-线程回归模型

    实验目的: 方程:y = Wx + b 通过大量的(x, y)坐标值,模型可以计算出接近W和b的值 实验步骤: 第一步:生成线程回归方程模型所需要的数据 import numpy as np impo ...

  4. k8s添加凭证

    请参照:https://www.cnblogs.com/effortsing/p/10013441.html

  5. LODOP条码二维码简短问答及相关博文

    LODOP如何输出条码 条码输出 参考样例11 http://www.c-lodop.com/demolist/PrintSample11.html超文本表格中的条码参考样例47 http://www ...

  6. 【神经网络与深度学习】【计算机视觉】YOLO2

    YOLO2 转自:https://zhuanlan.zhihu.com/p/25167153?refer=xiaoleimlnote 本文是对 YOLO9000: Better, Faster, St ...

  7. SOC中的DMIPS_GFLOPS_GMACS的含义

    l  DMIPS全称叫Dhrystone MIPS 这项测试是用来计算同一秒内系统的处理能力,它的单位以百万来计算,也就是(MIPS) 上面的意思也就是,这个处理器测整数计算能力为(200*100万) ...

  8. ZooKeeper的工作原理

     ZooKeeper是一个分布式的应用程序协调服务.   2 ZooKeeper的工作原理 Zookeeper 的核心是原子广播,这个机制保证了各个Server之间的同步.实现这个机制的协议叫做Zab ...

  9. Apache JMeter 做接口并发测试

    获知来源:查找如何使用Postman进行接口并发测试时,在StackOverflow上看到,说postman只能做串行测试,而且postman并不是被设计做这种测试的:而jmeter就是为了测试而开发 ...

  10. python实践项目五:操作剪贴板-pyperclip模块

    描述:读取剪贴板的内容,修改该内容,再将修改后的内容重新写进剪贴板 注意:执行程序代码前需保证剪贴板有内容,可复制以下内容来测试: Lists of animals Lists of aquarium ...