el-table固定列后表头下边框会消失

最新推荐文章于 2024-01-18 08:54:00 发布
原创 最新推荐文章于 2024-01-18 08:54:00 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

在使用el-table组件时遇到一个问题，当设置列固定后，表头的下边框不见了。解决方法是通过调整CSS样式，增加`.el-table__fixed-header-wrapper`的选择器，设置`top:-2px;`和`z-index:4;`，这样可以确保边框显示正常。

问题

el-table固定列后表头的下边框不见了

 

解决

.el-table__fixed-header-wrapper{
    top: -2px;
    z-index: 4;
}

 

xin5zhang8
关注
vxe-table 使用固定列并清除表格自带左右间距，表头边框线丢失
花椒和蕊的博客
09-19 2342
第一和第二列使用了fix属性固定列，因为是可编辑表格，使用插槽放了输入框后，要调整样式，要让输入框占满单元格。就会遇到一个问题，表格自带的vxe-cell类名，有个左右间距各10px。如果不清除的话，表格就会变成这样，两边的间距导致我们自己设的背景色占不满。如果直接deep深度改样式，就会遇到一开始的问题，表头少了下边框线。原先是这么写的，这样写的问题就是整个表格都被清除了左右间距。审查元素后，确实是这样vxe-table的左右间距导致的。换成下面这样，问题就解决了，只有表身清除。
解决element-ui的表格设置固定栏后，边框线消失的bug
weixin_44590591的博客
09-15 1517
解决element-ui的表格设置固定栏后，边框线消失的bug // 解决element-ui的表格设置固定栏后，边框线消失的bug /deep/ .el-table__row { td:not(.is-hidden):last-child { right: -1px; } } /deep/.el-table.theme table thead tr th { background: #3399ff !important; border-right:
element table下边线消失，以及左右边框不对齐
Aybuai的博客
07-14 2262
今天用element做表格的时候，碰见两个样式问题。问题如下图： 问题： 1、表格的下边线莫名其妙的消失了，之前也有做过，并未出现类似情况。 2、表格左右边框不对齐 解决： 问题一： <style> // 表头的下边线添加 .el-table th.is-leaf, .el-table td { border-bottom: 1px solid #EBEEF5; } // 表内容的下边线添加 .el-table td, .el-table th.is-leaf {
html5开发中td高度固定，超出部分隐藏无法实现的解决方案
zhanyue4的博客
09-16 9377
html5 css3 table td高度 超出隐藏
在css中为table 后表格单元格边界异常的解决办法
naihejiang的博客
10-09 1479
在css中添加border-collapse:collapse或在js中添加borderCollapse = "collapse"能够消除单元格间的间距， 但是，如果用js对table进行操作完后，table需要重新计算列宽时，个别单元格的边界会很不听话，仍然维持原来的宽度，这时删除表格的border-collapse:collapse就能恢复正常， 但单元格间会产生间距。尤其在使用<colgr
el-table固定列偶发拖拽出现边框消失的问题，固定列底部无法点击滑动的问题
weixin_44295184的博客
01-18 976
el-table固定列偶发拖拽出现边框消失的问题
el-table最后一列固定,导致和前一列直接的边框线消失
C422805的博客
08-15 2210
表格最后一列右侧固定(fixed:"right"),倒数第二列右侧边框线消失了,原因固定列遮住了该列的边框。
el-table fixed以后，border消失
weixin_42925674的博客
11-23 895
背景：查了很多博客，都没有靠谱的解决方案，最后审查元素发现问题。
el-table实现合并表头以及表格实现单选框，el-table去掉个别边框
叮当的猫猫的博客
12-08 3940
el-table合并表头，实现表格单选，隐藏el-radio中lable绑定的值
el table 固定表头和首行_再谈table组件：固定表头和表列
weixin_39725118的博客
12-22 2094
前言Github原文：github.com/qiud...本文介绍内容包括：1. Element UI 实现表头表列固定思考与总结2. translate3d如何实现表头表列固定书承上文，在前文【Vue进阶】青铜选手，如何自研一套UI库中介绍了Vue组件库的开发细节，举例实现了button、table等组件的开发。在Ange这个UI库中，我实现了一个内容高可定制的表格组件：可固定表头和表列，内容则...
一个属性border-collapse解决Table的边框问题
09-25
在网页设计中，表格（Table）是构建和组织内容的一种常用元素，但在过去，带边框的表格设计却经常让网页开发者感到头疼。原因在于，如果要创建一个看起来整洁美观的表格，需要花费大量的时间和精力去调整边框，以...
VUE-006-el-table拖拽表头页面显示异常（二）
weixin_39568072的博客
12-21 916
el-table拖拽表格宽度导致页面异常 <el-table-column fixed="right"> 情景2： 问题列fixed="right" 此时拖拽最后一列宽度，导致页面异常，如下： 解决办法1： 最后一列 el-table-column不要设置width，如下： 解决办法2： 倒数第二列加属性 :resizable="false"，如下： 这样设置后，最后一列尺寸就不可以被改变了。 ...
解决element-ui的表格设置固定栏后，右侧边框线消失
qq_36762151的博客
11-18 4137
表格最后一列右侧固定，倒数第二列右边框消失了。原因固定列遮住了该边框。
关于el-table固定列在右侧后缺失边框的解决办法
m0_60336681的博客
10-19 1725
关于el-table固定列在右侧后缺失边框的解决办法
element-ui中el-table使用fixed=“right“时固定列左边框消失问题
xiaobaige6084的博客
07-11 2012
element-ui中el-table使用fixed="right"时，横向滚动条滚到最右，固定列左边框不显示，加上如下css样式即可解决。
el-table设置边框后底部边框无法展示的解决方法
123
09-03 4735
在使用Element-UI的el-table组件时，使用cell-style给表格增加边框后，最底部的一条横线无法显示，这时候不要怀疑是自己的css写的不对，原因在于el-table的样式文件中给.el-table这个class设置了position:relative，导致无法正确显示。只需要把样式文件中的这个属性删除掉即可，暂时没发现有什么影响。 ...
html 表格右侧边线消失,怎么解决table使用了border-collapse：collapse属性后，table周围边框消失的问题？...
weixin_27268733的博客
06-02 1927
我在写一个table,给table的td加上边框后，发现中间边框特别粗，所以就使用border-collapse：collapse解决。但是使用之后发现表格周围的边框不见了，请问这样改怎么解决？css部分的代码如下#tableWrap{width: 488px;height: 300px;margin: 0 auto;}#tableWrap table{width: 100%;height: 10...
【Java设计模式】单例模式七种实现方案对比：线程安全、性能与适用场景深度解析
最新发布
12-16
内容概要：文章深入剖析了Java中单例模式的七种实现方式，包括饿汉式、懒汉式（线程不安全与线程安全）、双重检查锁定（DCL）、静态内部类、枚举单例和容器式单例，详细讲解了每种写法的实现原理、优缺点及适用场景，并从性能、线程安全、代码可读性等多个维度进行对比分析，最终指出应根据实际应用场景选择最优方案。同时强调枚举单例在防止反射和序列化破坏方面的优势，以及静态内部类和DCL在延迟加载与性能之间的平衡。; 适合人群：具备一定Java基础，熟悉面向对象设计和多线程编程，工作1-3年的开发人员或希望深入理解设计模式原理的技术人员。; 使用场景及目标：①理解单例模式在高并发环境下的线程安全实现机制；②掌握如何避免反射和序列化破坏单例；③在实际项目中根据需求选择最优的单例实现方式，提升系统稳定性与性能。; 阅读建议：此资源不仅展示代码实现，更注重原理剖析和场景对比，建议结合JVM类加载机制、指令重排、synchronized与volatile关键字等知识点深入理解，并通过动手实践和调试加深对各种写法差异的认识。
el-table去除表头前后边框线
02-22
### 如何在Element UI `el-table` 中去掉表头前后边框线 为了有效去除 Element UI 表格组件 (`el-table`) 表头的前后边框线，可以采取调整 CSS 样式的策略。由于即使未显式设置边框属性，在默认情况下 `<el-table>` 组件仍可能因框架内部样式或浏览器默认行为而展示边框效果[^1]。 #### 方法一：覆盖默认样式 通过自定义CSS来重写 `.el-table th.is-leaf` 和 `.el-table td` 类的选择器，移除其边框： ```css .el-table th.is-leaf, .el-table td { border-bottom: none; } /* 去掉右边框 */ .el-table::before{ content:none; } ``` 此方法适用于全局应用到所有表格实例上。如果仅需应用于特定表格，则应增加更具体的选择器前缀以确保样式的特异性。 #### 方法二：使用内联样式或 scoped 样式 (针对单个页面/组件) 对于Vue单文件组件(SFC)，推荐利用scoped样式防止污染其他部分的同时实现相同的效果: ```vue <template> <div class="custom-table"> <!-- Your el-table component here --> </div> </template> <style scoped> .custom-table >>> .el-table th.is-leaf, .custom-table >>> .el-table td { border-right: none !important; border-left: none !important; } .custom-table >>> .el-table::before { content: none!important; } </style> ``` 注意上述代码中的 `>>>` 是用于穿透作用域链的关键字，使得子元素能够被当前组件内的样式所影响；而在某些版本的 Vue CLI 工具中可能会采用 `/deep/` 或者不加任何修饰符直接编写即可生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值