前言
在使用Ant Ddesign ProComponent的时候,发现一个有趣的属性,可以快捷的解决列数过多导致排列不整齐的问题。
代码
<ProTable<TableProps>
scroll={{ x: 'max-content' }}
/>
对比
添加前:
添加后:
分析
看起来是不是整齐多了?scroll={{ x: 'max-content' }}
做了哪些改变呢?
比前后样式,发现它做了两处改变:
- class为ant-table-content的div元素添加了内联样式
overflow: auto hidden;
- table元素上添加了
width: max-content; min-width: 100%;
解释
一方面让class为ant-table-content的div元素在内容超出其现有宽度时可以允许内部元素横向去滚动,另一方面使用width: max-content;
这个属性
max-content
max-content
的行为表现可以这么理解,假设我们的容器有足够的宽度,足够的空间,此时,所占据的宽度是就是max-content
所表示的尺寸。