html里table表头随滚动条移动，表头只有一行，有横竖滚动条，而且横滚动条拖动的时候，表头也要随之移动

Posted 2023-04-18

类似这样的表
横滚动条拖动的时候表头动，竖滚动条滚动的时候表头不动！

参考技术A table外层加个div，写上高宽，然后出滚动条
<div style="height: 500px;width: 600px;overflow: scroll;">
<table>
</table>
</div>
类似这样的追问

不好用，横滚动条好用，竖滚动条滚动的时候表头还是动！

追答

你如果想竖着滚动就要写两个table，上面一个table装载表头，下面的是内容。
或者你想更容易的话，可以参考Jquery 的一些插件

追问

有具体点的代码吗，新手

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;
}