layui框架实现table某一列的合并+冻结(合并列+fixed冻结二者发生冲突)

在这里插入图片描述
1、先实现的合并(百度上有很多),我用的是这个博主的
京兆文鱼博主的:合并列的代码
2、对1中已经完成合并的这一列进行“冻结”,我用的是layui框架自带的fixed属性(不知道的可以看一下layui的开发文档,里面有的

在1的merge代码里,有这么一句话
var trArr = $(“.layui-table-main>.layui-table”).eq(4).find(“tr”);//所有行
$里的这个是你当前需要合并所在的列的这个内容,
在这里插入图片描述
但是你加了fixed属性后,你会发现,冻结的这一列是不属于上述内容的
在这里插入图片描述

所以只需将trArr后的daole符中的内容修改一下,$(“.layui-table-fixed.layui-table-fixed-l>.layui-table-body>.layui-table”).find(“tr”);
可能出来的结果会固定+会合并,但是因为只针对一列数据进行合并,导致样式很奇怪,可以将表格固定的列数再加列,就可以达到合并列+冻结的效果了

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现部分冻结并且不随着横向滚动条移动,可以使用 CSS 的 position 属性和 z-index 属性来实现。 首先,将表格分为两个部分,左边是需要冻结,右边是不需要冻结。然后将左边的表格使用 position: fixed; 和 z-index: 1; 属性进行固定定位,并设置宽度和表头行高。同时,将右边的表格使用 margin-left 属性将其向右移动与左边表格相同的距离,并设置 z-index: 0; 属性。 具体代码如下: HTML: ``` <div class="table-wrapper"> <table class="left-table"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </tbody> </table> <table class="right-table"> <thead> <tr> <th>Column 4</th> <th>Column 5</th> <th>Column 6</th> <th>Column 7</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 4</td> <td>Row 1, Column 5</td> <td>Row 1, Column 6</td> <td>Row 1, Column 7</td> </tr> <tr> <td>Row 2, Column 4</td> <td>Row 2, Column 5</td> <td>Row 2, Column 6</td> <td>Row 2, Column 7</td> </tr> </tbody> </table> </div> ``` CSS: ``` .table-wrapper { position: relative; overflow-x: scroll; } .left-table { position: fixed; top: 0; left: 0; z-index: 1; width: 200px; border-collapse: collapse; background-color: #fff; } .right-table { margin-left: 200px; z-index: 0; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; height: 50px; } ``` 在上面的代码中,我们将两个表格放在一个包裹 div 中,并将 div 的 overflow-x 属性设置为 scroll,以便在表格宽度超出 div 宽度时出现横向滚动条。 左边的表格使用 position: fixed; 和 z-index: 1; 属性进行固定定位,并设置宽度和表头行高。右边的表格使用 margin-left 属性将其向右移动与左边表格相同的距离,并设置 z-index: 0; 属性。 这样,左边的就会被冻结在页面上方,不会随着横向滚动条移动,而右边的则会随着横向滚动条移动。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值