antd 表格加y轴滚动时行与行间错位问题

最新推荐文章于 2023-10-20 15:33:38 发布
最新推荐文章于 2023-10-20 15:33:38 发布
阅读量2k 收藏
点赞数
分类专栏： ant-design react.js 文章标签： reactjs css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenlincc/article/details/105710862
版权

当表格左侧或右侧列使用fixed 时，加y轴滚动会出现与普通行不对齐。

	.ant-table-body-outer{
			margin-top:5px !important;  // 根据实际调整matgin-top 大小
}

如果使用全局样式，会使其它使用fixed，但没有使用Y轴滚动的列出现偏移。建议在局部样式使用

CAICANY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css修改浏览器默认滚动条样式
qq_44417271的博客
05-25 1036
/*滚动条样式*/ ::-webkit-scrollbar { width: 4px; /*height: 4px;*/ } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-track { -webkit-box-s.
antd 4 表格加scrolly 并且加fixed后错位
lixinhua_man的博客
05-17 454
right: 0!important;
antd table 固定列 遮挡滚动条解决
weixin_61028990的博客
07-06 629
【代码】antd table 固定列 遮挡滚动条解决。
Ant-Design-Vue中Table使用固定列fixed，当出现横向滚动条时，行之间出现错位的问题
可以吃的向日葵
06-06 9533
ant-design-vue 的table 设置了 fixed 属性后，出现行对不齐（行错位）的问题
antd表格固定后出现，对不齐的现象，解决方案
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-30 9508
问题描述： antd表格固定后出现对不齐的现象，比如设置了fixed。如下图 这个是官方的bug，在后续版本修复了 在3.26.1里修复了。 antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952 解决方案： 1.升级版本（方案一） 但对于老项目，升级成本高或者暂时无法升级的就只能用样式强行控制了 2.样式控制（方案二） (1).github 上antd issues 19952给了一个方案 ...
Ant design 表格加上scroll属性后列跟表头不对齐
fhdjdfhjd的博客
02-28 3980
Ant design 表格加上scroll属性后列跟表头不对齐
ant-design Table组件错位/对不齐
热门推荐
baozhuona的博客
06-28 3万+
此篇乃小伙伴们在花式踩坑antdesign的table组件后，总结的专治对不齐的十全大补丸，望君趁早服用及时康复，如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充
antd——table样式：表头和表体错位问题——max-content的用法
yehaocheng520的博客
05-30 6542
antd——table样式：表头和表体错位问题——max-content的用法
antd 表格列宽自适应方法以及错误处理操作
01-18
在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度 表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的...
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { ...
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
ant design vue a-table 表头和内容不对齐，一行代码解决问题
陈新科的博客
11-24 3447
动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...
antd 设置表头属性_解决Antd Table组件表头不对齐的问题
weixin_39802020的博客
12-21 836
背景：在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动但是在添加了该属性之后，经常会出现表头不对齐的问题：针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案：1、对表格的每一行 【columns】设置width属性(留出一行进行宽度自适应)；2、scroll属性中的x选择一个合适的值(或者直接设为 ...
vue elementUI怎样解决表格滚动条滑动，表格错位
最新发布
ALSO666的博客
10-20 1873
vue elementUI怎样解决表格滚动条滑动，表格错位
ant Design Vue表格实现滚动条隐藏，鼠标移入滚动条出现
爱米酱的博客
03-24 3858
.ant-table:hover .ant-table-content .ant-table-fixed-right .ant-table-body-outer .ant-table-body-inner::-webkit-scrollbar-thumb { background-color: #999; } .ant-table .ant-table-content .ant-table-fixed-right .ant-table-body-outer .ant-table-body-inn.
解决AntDesign的Tabs组件内嵌Table表格组件，切换Tab后表格变宽的问题
Byicon的博客
02-18 1384
解决AntDesign的Tabs组件内嵌Table表格组件，切换Tab后表格变宽的问题
ant design Icon.createFromIconfontCN 添加iconFont 失败并报错问题解决
chenlincc的博客
05-26 9880
当页面需要使用较多字体图标时， antd内置的字体图标库满足不了需求，
antd Form表单initialValue设置无效的问题之一
chenlincc的博客
08-14 7179
在表格数据中，编辑数据时用到的表单需要使用initialValue 来设置初始值， 以下写法会导致initialValue设置无效。 当表单组件被<></> ，< div></ div> 等包裹时，initialValue设置无效 // initialValue 设置无效的写法 <Form.Item label="xxx"> {getFieldDecorator('xxx',{ initialValue:'default' })( <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值