zoukankan      html  css  js  c++  java
  • layui table中固定表头,弹框缩放之后,表头对不齐问题

    问题描述:

    在弹框中的表格,表格设置height属性

    如果表格数据太多,表头会固定,只有表内容会滚动

    拖动弹框右下角缩放弹框时,表格的头部对不齐

    正常显示如图:

    缩放之后如图:

     

    解决办法:

    layer有一个resizing属性,是弹框缩放结束的回调放方法

    在回调之后重新根据数据列设置表头的宽度。

    resizing: function (layero) {
        var tableDom = layero.find('.layui-table-box');
        var theadTable = tableDom.find('.layui-table-header');
        var tbodyTable = tableDom.find('.layui-table-body');
        tbodyTable.css({
            'overflow': 'auto'
        });
        theadTable.css('width', 'auto');
        theadTable.find('table').css('width', 'auto');
        var tbodyTrTable = tbodyTable.find('tr').eq(0);
        if (tbodyTrTable.length != 0) {
            theadTable.find('th').each(function (i) {
                var tdDom = tbodyTrTable.find('td').eq(i);
                $(this).css({
                    'width': tdDom.outerWidth(true) + 'px'
                });
            });
        } else {
            theadTable.find('table').css('width', '100%');
        }
        tableDom.find('.layui-form').css('height', tbodyTable.outerHeight(true) + theadTable.outerHeight(true) + 'px');
     }
  • 相关阅读:
    使用 GitHub, Jekyll 打造自己的免费独立博客
    如何解决数据科学计数法在数据库中的显示
    RDF
    C# 在 4.0 以后一共有3种创建线程的方式
    C#多线程
    1、框架概述
    3、IDEA 中使用 Maven
    2、Maven 核心概念
    1、Maven 概述
    JDK动态代理
  • 原文地址:https://www.cnblogs.com/kcat/p/10825110.html
Copyright © 2011-2022 走看看