使⽤antdesign的table控件最后⼀列固定（fixed）遇到不渲染的问题
⼯作以来⼀直在做2b的项⽬，因此表单操作，权限设置，⼀些业务逻辑就做的⽐较多。
⾸先介绍下背景：前后端完全分离，前端技术栈使⽤react+redux+antd，经常是没有视觉设计，全凭产品需求⽂档··_··！最近产品来了个需求，需要做⼀个流程图，在流程图上点击⽂字时需要弹窗显⽰数据，因此渣渣⼀个需求⾥做了n个弹窗，弹窗上再弹窗。。。。。（⼼⾥⽆数XXX奔过），因此也遇到了不少的问题，流程图是个⼤模块，遇到的问题等下次再细说，这次就简单讲下如题所述的情况
10月10日猜一字
这就是所做的流程图（因为数据是内部的，只能将就了）只要有编辑的地⽅都会分情况出现各种弹窗。
这⾥就是产品和业务在做回归测试的时候出现的问题。tasble表格的宽度设成了130%，最后⼀列设定
宽度130px，并且固定在表格右侧，在这列上给添加了两个按钮，编辑和删除。在页⾯渲染过程中会发现后⼀列的两个按钮直接没有，⿏标滑过的时候就会出现，或者是不在屏幕可视范围内的按钮不渲染，但是打开控制台，却能看见到dom结构是存在的，也是⼀脸懵逼啊。渣渣发现antd做最后⼀列固定是属于重写⼀个table结构，写出⼀模⼀样的⼀列然后使⽤定位的⽅式改在相应的位置上。估计是直接对表格上的最后⼀列做定位不好操作，所以才会写个⼀样的table结构定位到页⾯上进⾏覆盖。因此才会有哪些最后固定的⼀列不设置宽度时，出现两个⼀样的列
⼀开始渣渣对表格的设置是
<Table
rowSelection={rowSelection}
rowKey={record => record.key}
columns={columns}
dataSource={this.state.list}
假装的反义词bordered={true}
pagination={fal}
scroll={{ x:'130%'}}
loading={quest}
onChange={(pagenation, filters, sorter)=>{
}}
雷锋画像className="sku-table"
/>
这样会发现表头的数据有些换⾏了，但是操作的那列表⾼度并没有相应的增加，导致有错⾏的情况，因此将scroll={{ x: ‘130%’ }}改成了scroll={{ x: ‘max-content’ }}。针对渲染出现的异常情况，在antd的GitHub上翻遍了所有的issue也没有到类似的情况，只能⾃⼰尝试的改改了。
原来⾃带的css样式
.ant-table-fixed-left,
.ant-table-fixed-right {
position: absolute;
top:0;
overflow: hidden;
transition: box-shadow 0.3s ea;
border-radius:0;
}
附上改后的css
竖琴曲>年夜饭通知
.ant-table-fixed-left,// 这个就是含最后⼀列固定的table表格类名
望天门山教案.ant-table-fixed-right {
z-index:999999
overflow: visible深圳夜景最漂亮的地方
}
.ant-table th,
.ant-table td,
{
white-space: nowrap;
}
.
ant-table-fixed {// 对max-content做浏览器兼容
width:-webkit-max-content;
width:-moz-max-content;
width: max-content;
}
max-content直接写在table的scroll={{ x: ‘max-content’ }}中发现在⽕狐有时候没起作⽤，因此才会有下⾯的浏览器兼容。但是单独看max-content的兼容性还是很不错的。emmmmm…#_# 很⽆奈呀
这些修改其实就是覆盖了原来的overflow:hidden变成overflow: visible，然后添加z-index: 999999。要说具体的原因，其实并没有了解到本质，就是解决了这个问题⽽已，如果有遇到相似问题的朋友并且⼜刚好知道为什么的话，⿇烦告知，感激不尽！
>投资过热
