IE9中table出现空白单元格及td出现错位的问题

问题描述:最近做的项目中,PC端页面有大量的table。某些页面的table列数较多(20列左右),在IE9浏览器中部分表格单元格分割线显示不全,同时存在数据显示错位。如下图所示:


原因:经排查,发现是换行引起的,即<tr><td></td><td></td></tr>不能换行。

解决办法:找一个在线HTML压缩,将表格插件中 table.html的代码进行压缩处理,使 table.html的标签间无换行,无空格。

### 解决 Element UI `el-table` 固定列时滚动条不显示的问题 当遇到Element UI中的`el-table`组件在设置了固定列之后,横向滚动条未能正常显示的情况,可以考虑以下几个方面来解决问题。 #### 1. 检查全局样式冲突 如果项目中自定义了页面级别的滚动条样式,则可能会影响到`el-table`内部的滚动机制。确保这些全局样式不会干扰到表格内的滚动功能[^1]。 #### 2. 调整固定列的高度 对于存在固定列的情况下,可以通过覆盖默认样式的方式调整`.el-table__fixed`, `.el-table__fixed-right`的选择器高度属性,使其适应实际需求并防止可能出现的内容溢出问题: ```css .el-table__fixed, .el-table__fixed-right { height: calc(100% - 13px) !important; } ``` 此段代码通过减少容器高度解决了因布局计算误差而导致的视觉错位现象[^2]。 #### 3. 设置指针事件控制 为了使X轴方向上的滚动操作能够顺利执行,在不影响其他交互的前提下,可尝试应用以下CSS规则给固定的左侧或右侧栏目的父级元素及其子项单元格: ```css .el-table__fixed, .el-table__fixed-right { pointer-events: none; td { pointer-events: auto; } } ``` 这段配置允许鼠标点击穿透至底层的同时保留了单个单元格内链接或其他控件的功能可用性[^3]。 #### 4. 使用 JavaScript 动态处理 除了上述纯前端解决方案外,还可以借助JavaScript实现更灵活的操作逻辑。例如利用Vue框架提供的生命周期钩子方法,在合适时机调用特定函数完成初始化工作: ```javascript this.$refs["singleTable"].$nextTick(() => { this.escrollY(".el-table__body-wrapper", ".el-table__header-wrapper"); }); ``` 这里展示了如何结合DOM更新周期触发回调以确保所有渲染完成后才进行下一步动作[^4]。 综上所述,针对不同场景下的具体表现形式采取相应的措施往往能有效改善用户体验,并最终达到预期效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值