layui table 表格出现表头和内容不对齐问题解决方法

Posted 洛阳醉长安行

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui table 表格出现表头和内容不对齐问题解决方法相关的知识,希望对你有一定的参考价值。

在使用layui开发中,表格如出现滚动条,表头和表内容不对齐的问题,是因为滚动条的宽度影响到了。
因为滚动条有单独的补丁列,把源码lay/modules/table.js 845行注释

  o = function (e) {
                    // if (a && l) {//滚动条导致列和头不对齐问题
                        if (a) {
                          if (
                            ((e = e.eq(0)), !e.find(".layui-table-patch")[0])
                          ) {
                            var i = t(
                              \'<th class="layui-table-patch"><div class="layui-table-cell"></div></th>\'
                            );
                            i.find("div").css({
                              width: a,
                            }),
                              e.find("tr").append(i);
                          }
                        } else e.find(".layui-table-patch").remove();
                };

css减少补丁列的宽

th.layui-table-patch{
    padding: 0 !important;
}

以上是关于layui table 表格出现表头和内容不对齐问题解决方法的主要内容,如果未能解决你的问题,请参考以下文章

Element - table表格控件表头和内容列不对齐的问题

bootstrap-table 使用遇到的问题总结:1.右上角button样式自定义;2.右上角引用图标自定义;3.表头/表格内容显示不对齐;4.自定义设置表头及表格边框样式

layui table中固定表头,弹框缩放之后,表头对不齐问题

element-ui的table表格的表头与内容列对齐

解决antd表格表头内容无法对齐的问题

elementui中table组件表头和内容不对齐的问题