table表，scroll同时使用x和y时，表头与列错位--如demo

[changhighly]

trafficstars

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

MAC10.13.3，Google Chrome79.0.3945.79 (正式版本) （64 位），"vue": "^2.5.22",

Reproduction link

Steps to reproduce

在a-table中给:scroll添加y:300

What is expected?

表头与列对齐

What is actually happening?

表头与列错位

---

开发需求：当表中数据多时，要求限制表的高度，同时文字要一行展示，避免表头滚到屏幕上侧，于是给:scroll="{ x:true }"添加y --> :scroll="{ x:true, y:300}"，当给scroll添加y:300后，表头与列就错位了

[masterlirui]

我也遇到相同的问题 这个是官方的一个bug问题吗？

[masterlirui]

哥们儿 你解决了吗 我尝试了下 把列都设置了固定的宽度，然后把scroll.x尽量设置大一些，至少要超过你所有列的宽度总和，我这边就显示正常了 不错位。 但是有个新的问题是，给scroll.y设置高度后，如果表格内容超过这个设置值，能正常展示滚动条并且正常下拉滚动操作。但是表格内容如果没有超过这个设置值，按理说不应该出现下拉滚动条的，但是现在依然出现了一个滚动条的占位符在那儿 只是没办法下拉滚动而已 太丑了，你有遇到过吗

[changhighly]

你说的这个方法官方用法上有，但是我想做成宽度自适应那种，每次都要去调整列宽很麻烦，而且列很多，还要算一下列宽的总和来设置x。

[celizi]

你要固定表格宽度，保留一列（备注列）长度不设定

增加下面样式 去掉一直显示的滚动条 #body-table .ant-table-body{ overflow:auto !important; } #body-table .ant-table-header{ overflow:hidden !important; margin-bottom: 0px !important; } 然后出现横向滚动条超出问题，需要动态配置标题div的宽度为你的固定宽度+浏览器滚动条宽度（大于也可以，自动会对齐） this.$refs.bodyTable.querySelectorAll('.ant-table-header .ant-table-fixed')[0].style = "width: "+1250 +"px"

这些建议作者源码同效果修改，这些只能参考 临时使用

[celizi]

同时建议进行使用时 表格单独封装为自己项目的组件，因为配置才参数很多 动态的列插槽 自己页面就几行代码就可以了

	<body-table pageMethod="applyPage" :columns="columns">
		<a slot="status">hhh</a>
		<a slot="type">type</a>
	</body-table>

[celizi]

主要是插槽传递 template v-for="column in columns" :slot="column.scopedSlots?column.scopedSlots.customRender:''"></template

[coywoo]

if (this.scroll.y >= 0) { this.scroll.x = "100%"; }

[shanhan0]

如果（this.scroll.y> = 0）{ this.scroll.x =“ 100％”; } 这个可以解决错位吗

[shanhan0]

你要固定表格宽度，保留一列（备注列）长度不设定

增加以下样式去掉一直显示的滚动条 ＃body-table .ant-table-body { overflow：auto！important; } ＃body-table .ant-table-header { overflow：hidden！important; margin-bottom：0px！important; } 然后出现横向滚动条超出问题，需要动态配置标题div的宽度为你的固定宽度+浏览器滚动条宽度（大于也可以，自动会对齐） this。$ refs.bodyTable.querySelectorAll（'。ant-table -header .ant-table-fixed'）[0] .style =“ width：” +1250 +“ px”

这些建议作者二进制同效果修改，这些只能参考临时使用

可以具体说下怎么使用的吗

[celizi]

你要固定表格宽度,保留一列(备注列)长度不设定 [[#body.ant表体= 溢出：自动！重要;] #body表. ant 表标题 = 溢出：隐藏！重要;边距底部：0px！重要;] [，]，\，\）这个$ refs. bodyTable. 查询器All （']蚂蚁表 - 头. ant 表 - 固定'） {0}. style = "宽度：" [1250]" px" 这些建议作者二进制同效果修改,这些只能参考临时使用

可以具体说下怎么使用的吗

＃body-table .ant-table-body { overflow：auto！important; } ＃body-table .ant-table-header { overflow：hidden！important; margin-bottom：0px！important; } 定义这些样式就差不多了

[celizi]

[coywoo]

2020年12月31日 上午10:41，shanhan0 [email protected] 写道：

如果（this.scroll.y> = 0）{ this.scroll.x =“ 100％”; } 这个可以解决错位吗

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vueComponent/ant-design-vue/issues/1658#issuecomment-752822473, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF2B5QGXY2J6UMCNFBHZMNDSXPQF5ANCNFSM4J7EHQLQ.

这个解决当scroll.y设置了高度后，scroll.x设置为true，横向滚动时header与tbody会错位错位,所以必须x设为100%就行了

[celizi]

表格配置：tableheight 是页面动态计算的行高 :scroll="{ x: '100%',y: this.tableheight }"

在加载数据的回调内（需要延迟一丢丢即可）： setTimeout(function(){ //修复头部滚动条 that.monitorBar(); },50)

修复头部与内容不对齐的方法（加载数据后，计算表格内容有无滚动条，动态变更头部样式进行对齐） monitorBar(){ var table = this.$refs.bodyTable.querySelectorAll('.ant-table-body')[0]; var header = this.$refs.bodyTable.querySelectorAll('.ant-table-header')[0]; if(table.scrollHeight>table.clientHeight){ header.style="margin-bottom: -17px; padding-bottom: 0px; min-width: 17px; overflow: scroll;" }else{ header.style="overflow:auto;" } } 其他样式： 配置表格滚动条自动 #bodyTable .ant-table-body { overflow: auto !important; }

如果对你有帮助，请点赞。

[shanhan0]

感谢感谢，非常感谢您的解答。  

------------------ 原始邮件 ------------------ 发件人: "vueComponent/ant-design-vue" <[email protected]>; 发送时间: 2021年1月5日(星期二) 下午4:02 收件人: "vueComponent/ant-design-vue"<[email protected]>; 抄送: "2993369376"<[email protected]>;"Comment"<[email protected]>; 主题: Re: [vueComponent/ant-design-vue] table表，scroll同时使用x和y时，表头与列错位--如demo (#1658)

表格配置：tableheight 是页面动态计算的行高 :scroll="{ x: '100%',y: this.tableheight }"

在加载数据的回调内（需要延迟一丢丢即可）： setTimeout(function(){ //修复头部滚动条 that.monitorBar(); },50)

修复头部与内容不对齐的方法（加载数据后，计算表格内容有无滚动条，动态变更头部样式进行对齐） monitorBar(){ var table = this.$refs.bodyTable.querySelectorAll('.ant-table-body')[0]; var header = this.$refs.bodyTable.querySelectorAll('.ant-table-header')[0]; if(table.scrollHeight>table.clientHeight){ header.style="margin-bottom: -17px; padding-bottom: 0px; min-width: 17px; overflow: scroll;" //margin-bottom:0px !important; }else{ header.style="overflow:auto;" } } 其他样式： 配置表格滚动条自动 #bodyTable .ant-table-body { overflow: auto !important; }

如果对你有帮助，请点赞。

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[fangzesen]

你要固定表格宽度,保留一列(备注列)长度不设定 [[#body.ant表体= 溢出：自动！重要;] #body表. ant 表标题 = 溢出：隐藏！重要;边距底部：0px！重要;] [，]，\，\）这个$ refs. bodyTable. 查询器All （']蚂蚁表 - 头. ant 表 - 固定'） {0}. style = "宽度：" [1250]" px" 这些建议作者二进制同效果修改,这些只能参考临时使用

可以具体说下怎么使用的吗

＃body-table .ant-table-body { overflow：auto！important; } ＃body-table .ant-table-header { overflow：hidden！important; margin-bottom：0px！important; } 定义这些样式就差不多了

按照这个方法当横向滚动到最后ant-table-body会比表头多一个滚动条的占位，所以我这边的方法直接表头补多一个滚动条的占位，代码如下： ＃body-table .ant-table-body { overflow：auto！important; } ＃body-table .ant-table-header { overflow：hidden！important; margin-bottom：0px！important; margin-right: 16px }

[maqiushun]

x的值设置为100%就可以了