解决element-ui的表格设置固定栏后,右侧边框线消失

 表格最后一列右侧固定,倒数第二列右边框消失了。原因固定列遮住了该边框。

 1.给固定列设置一条左边框

注意:这条消失的边框,气人的是有时又出现了,这样导致会有重复的边框线;

所以保险做法是:添加的同时,去掉前一个格的右边框线;

>>>.el-table__row td:not(.is-hidden):last-child {
  border-left:1px solid #EBEEF5;
}
>>>.el-table__header th:not(.is-hidden):last-child{
  border-left:1px solid #EBEEF5;
}

>>>.el-table__header-wrapper tr th:nth-last-child(3){
  border-right:none;
}
>>>.el-table__body-wrapper tr td:nth-last-child(2){
  border-right:none;
}

2.固定列像右移动1边框像素 

注意:这样会导致表格右侧边框消失

>>>.el-table__row td:not(.is-hidden):last-child {
  /*left:1px;  */
  right:-1px;
}

<think>好的,我现在需要解决用户提到的element-uiel-table固定列或表头后下边框消失的问题。首先,我需要回忆一下之前处理过类似问题的经验,或者查找相关的资料。用户已经提供了几个引用,可能里面有一些线索。 用户提到使用fixed固定列或者固定表头后,下边框消失。这可能是因为固定列或表头时,element-ui使用了不同的渲染方式,导致边框样式被覆盖或者未正确应用。通常,CSS样式问题可以通过自定义样式来解决。 首先,检查引用中的内容。引用[1]和[3]提到了处理滚动条和固定表头时的样式调整,比如调整宽度或使用sticky定位。引用[4]涉及合并单元格,可能和边框样式无关。但用户的问题是关于边框消失,可能需要覆盖默认的边框样式。 可能的解决方案是,在固定列或表头的情况下,手动添加边框样式。比如,检查el-table固定列部分的元素结构,找到对应的class或元素,然后通过CSS添加下边框。例如,固定列通常会生成.el-table__fixed类,可能需要给这些元素的右边框或下边框设置样式。 另外,可能el-table固定列时,某些部分的边框被其他元素遮挡或者未正确渲染。例如,固定列的容器可能没有继承父容器的边框样式,需要显式设置。或者,使用!important来覆盖element-ui的默认样式。 接下来,我需要验证这个思路是否正确。比如,通过浏览器的开发者工具检查固定列或表头部分的DOM结构,查看对应的CSS类,然后添加相应的边框样式。例如,针对固定列的右侧边框,可能需要设置.el-table__fixed-right的border-left属性,或者检查是否有覆盖下边框的情况。 此外,引用[3]中提到了设置滚动条的样式,可能涉及到高度计算,但边框消失可能与边框颜色或边框属性的覆盖有关。例如,element-ui的默认边框颜色可能较浅,或者在固定部分边框被设置为none,需要覆盖这些样式。 可能的解决方案步骤包括: 1. 使用CSS选择器定位到固定列或表头的元素。 2. 显式设置border-bottom属性,确保颜色和宽度正确。 3. 检查是否有其他样式覆盖,使用!important提高优先级。 4. 测试在不同情况下(如滚动时)边框是否保持显示。 例如,可以添加如下样式: ```css .el-table__fixed-right::after, .el-table__fixed::after { content: ''; position: absolute; bottom: 0; width: 100%; border-bottom: 1px solid #ebeef5 !important; } ``` 这里使用伪元素::after来添加下边框,并设置!important确保覆盖默认样式。需要确认选择器是否正确,以及是否适用于用户的场景。 另外,可能需要处理表头部分的下边框,特别是当表头固定时,表头的下边框可能缺失。类似地,检查表头元素的类,如.el-table__header,设置border-bottom属性。 测试时需要注意,不同的element-ui版本可能有不同的类名或结构,需要确认用户使用的版本是否与解决方案兼容。如果用户使用的是较新版本,可能需要调整选择器。 总结,解决方案应通过自定义CSS覆盖element-ui的默认样式,确保在固定列或表头时,下边框正确显示。</think>针对element-uiel-table固定列或表头后下边框消失的问题,可通过以下步骤解决: ### 解决方案 1. **定位边框缺失元素** 固定列或表头时,Element-UI通过动态生成的`.el-table__fixed`或`.el-table__fixed-right`实现布局,但这些容器可能未继承父表格的边框样式。 2. **自定义CSS覆盖样式** 添加以下代码,强制为固定列和表头设置下边框: ```css /* 修复固定列下边框缺失 */ .el-table__fixed::after, .el-table__fixed-right::after { content: ""; position: absolute; bottom: 0; width: 100%; border-bottom: 1px solid #ebeef5 !important; /* 与默认边框颜色一致 */ } /* 修复固定表头下边框缺失 */ .el-table__header-wrapper.is-scrolling-none th { border-bottom: 1px solid #ebeef5 !important; } ``` - 使用`::after`伪元素覆盖原有样式[^3] - `!important`确保优先级高于默认样式[^1] 3. **检查滚动条影响** 若存在横向滚动条,需调整容器宽度避免边框被遮挡: ```css .el-table__body-wrapper { width: calc(100% - 6px) !important; /* 兼容滚动条宽度 */ } ``` ### 验证效果 - **固定列**:滚动表格时,固定右侧和下边框保持显示 - **固定表头**:表头底部始终显示分隔线 - **兼容性**:支持Element-UI 2.x版本[^3]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值