chrome 下 缩放element ui 的table组件会导致表头和表体错位

最新推荐文章于 2023-03-27 16:36:57 发布
最新推荐文章于 2023-03-27 16:36:57 发布
阅读量326 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nishiweiyj/article/details/120860980
版权 
chrome 下 缩放element ui 的table组件会导致表头和表体错位

在index.html或者入口文件App.vue中添加样式

亲测App.vue中无效的话就在index.html中添加

body .el-table th.gutter{
    display: table-cell!important;
}
给类名为 gutter的表头单元格添加display: table-cell!important;
display: table-cell
这个属性让元素变成表格单元
配合display:table可以模拟table的布局属性

七夜的许愿星yj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element ui 当页面多table切换时，表头宽度受到影响；
Iwantyou_baby的博客
11-04 975
在每个el-table-column添加一个key
html表头和内容错位,el-table表头根据内容自适应完美解决表头错位和固定列错位...
weixin_35997666的博客
06-05 732
将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式 )通过计算文字的宽度进行表头设置，其他内容无法计算。5000个单元格以上根据实际情况使用以上根据实际情况使用，因为单元格越多，计算时间越长。尽量使用v-if，不然有些情况下会计算错误。Vue.directive("tableFit", {//指令所在组件的 VNode 及其子 VNode 全部更新后调用。componentUpdated...
element-ui 表格在缩放后表头和表格内容错位
LJJONESEED的博客
08-27 602
我在IE浏览器缩放的时候出现的，其他浏览器我没用测试。 问题如下，浏览器放大的时候就错位了。 解决办法：在index.html或App.vue文件（必须是入口文件，才能全局起作用）的style标签中添加如下样式： body .el-table th.gutter{ display: table-cell!important; } ...
兼容问题！Element UI table组件部分浏览器表头边框不对齐
zhuang_li_quan的博客
08-28 482
今天使用elementUI框架开发时，发现表格组件存在浏览器兼容问题，表格边框会对不齐，如图所示： 解决方案：在App.vue添加以下代码 <style lang="scss"> body .el-table th.gutter { display: table-cell !important; } </style> 这样就完成啦，解决了麻烦点个赞噢！！！ ...
el-table闪烁及左固定列在滚动轮缩放出现错位问题
qq_35246952的博客
05-26 973
1、el-table一直闪烁，具体方法和百度上一样 .el-table { width: 99.9% !important; } .el-table__body { width: 100% !important; } 2、左固定列在滚动轮缩放的时候出现的错位 在网上找了几种方案 发现都没用 像这种 重绘也没用 this.$refs.multipleTable.doLayout() 后面我发现 当有x滚动条时不会出现错位，于是通
解决--el-table固定操作列时 数据错位问题
DcTbnk的博客
09-02 1951
【有必要去看看】参考链接—> this.$nextTick( ()=> { this.$refs.tableRef.bodyWrapper.scrollTop = 5 })//在请求数据的时候使用，相当于手动滑动了一下表格 发生错位的原因，是由于table在数据请求后，渲染异常的问题；因此，解决办法就是让table重新布局。 找到请求数据的地方，立刻获取更新后的DOM ...
5种做法实现table表格中的斜线表头效果
09-28
直接利用UI设计人员制作好的带有斜线的图片作为表格表头的背景图，通过CSS将背景图铺满整个表头单元格。这种方法操作简单，能够快速实现效果，并且可以控制斜线的样式、颜色和位置。但缺点是不够灵活，无法适应响应...
bootstrap table列和表头对不齐的解决方法
01-21
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头 数据 的div宽度不...
bootstrap-table头部错位已完美解决
10-31
在实际应用中，我们可能会遇到表格头部错位的问题，这通常是因为CSS样式冲突、浏览器兼容性或者Bootstrap自身样式调整导致的。在标题和描述中提到的解决方案，已经成功地解决了这一问题，并且经过验证在IE、Firefox...
element-ui-2.13.2版本
10-23
2. **响应式设计**：Element UI 遵循 Material Design 设计规范，提供了一套完整的响应式布局方案，确保在不同设备和屏幕尺寸下都能呈现出良好的用户体验。 3. **易于使用**：Element UI 的组件具有良好的文档支持...
浏览器缩放导致table表格错位样式问题的解决
Luckygirl_jian的博客
09-03 1337
html table表格在浏览器缩放100%时正常显示 但人们有时会缩放90或者更小，这时样式便出现了问题，错位了，该如何解决呢？
vue中使用element-ui里的table中表头与表格出现错位问题
qq_32555123的博客
10-12 336
电脑显示的缩放引起的，并且发现同为webkit内核的Google浏览器和360浏览器中360浏览器显示正常，而Google浏览器才会出现这个问题。
关于复杂表头表格错位问题
qq_41860287的博客
03-31 115
项目中遇到的一个问题，需求是做复杂表头主子表，但是做好后发现表格错位，总是差1~2px左右的错位问题，强迫症不能忍。。。。百度后有很多解决方案，下面这个亲测有效，做个记录昂。 .el-table th.gutter { display: table-cell !important; } ...
chrome浏览器下dispaly:table-cell下的新表现or新bug
weixin_30505751的博客
10-08 132
之前看过张鑫旭的博客 页面重构“鑫三无准则” 之“无宽度”准则：http://www.zhangxinxu.com/wordpress/?p=1152 CSS流体(自适应)布局下宽度分离原则：http://www.zhangxinxu.com/wordpress/?p=1463 我所知道的几种display:table-cell的应用：http://www.zhangxinxu.com/w...
给table的td设置了 colspan排版依然乱解决方案
weixin_45618937的博客
10-20 745
给table的td设置了 colspan排版依然乱解决方案
Table表格错乱
mao6666spirit的博客
03-27 226
对 Table 进行重新布局。当 Table 表格在显示或刷新出现表格错乱的时候,需要调用此方法刷新表格。watch侦听器数据发生改变,每次在数据更新之后调用nexttick获取最新的dom进行刷新操作。
在table中tr的display:block在firefox,chrome下显示布局错乱问题
Freewind的专栏
12-14 2982
按照常理，对于某一单元行需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏 览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的 鬼。 1、当表格为多列的情况下，属性为"display:block"行的内容宽
自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题
beretHat_5的博客
03-25 2086
问题： el-table组件中，column在设置了fixed属性的情况下下，垂直滚动会出现表格错位的问题。分析： column在设置了fixed=“left”或fixed=“right”后，在table的对应位置增加了对应个数的column，它们都被设置为position: fixed。下面的table只是被固定的column遮盖，当垂直方向有滚动事件时，两侧固定column会动态计算滚动高度。但是实际使用中计算的时候会受头部样式或padding的影响而计算出错，导致出现表格错位的问题。
table多行表头渲染时出现位置错乱问题
@不喝海之言@
06-23 565
若你也是表格跨行跨列在动态渲染时出现的表头位置错乱问题，可以直接看`PartThree`。
element ui table设置滚动条的样式
最新发布
07-12
要为 Element UI 的表格设置滚动条样式，您可以使用自定义 CSS 来实现。 首先，为表格容器元素添加一个类名，例如 `custom-scrollbar`： ```html <el-table class="custom-scrollbar"></el-table> ``` 然后，在您的 CSS 文件或样式标签中，使用以下样式来定义滚动条的样式： ```css .custom-scrollbar::-webkit-scrollbar { width: 8px; /* 定义滚动条宽度 */ background-color: #f5f5f5; /* 定义滚动条背景色 */ } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #888; /* 定义滚动条滑块颜色 */ } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #555; /* 定义滚动条滑块在悬停时的颜色 */ } ``` 在上述示例中，我们使用了 `-webkit-scrollbar` 伪元素来定义滚动条的样式。您可以根据需要修改宽度、背景色、滑块颜色等属性来适应您的设计。 请注意，这些样式仅适用于支持 WebKit 内核的浏览器（如 Chrome、Safari）。对于其他浏览器，您可能需要使用不同的前缀或其他方式来定义滚动条样式。 希望以上信息对您有所帮助！如果您还有其他问题，请随时向我提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值