layui table 竖向滚动条导致表头和内容没对齐，css如何解决，完整实例

当在layui的table组件中遇到竖向滚动条导致表头与内容错位的问题，通常是因为表格高度超过容器高度，而thead部分固定，没有随着滚动一起移动。你可以通过CSS调整来解决这个问题。以下是一个基本的实例：

1. 首先，确保你的HTML结构包含layui的table元素，并设置了相应的高度，例如：

<div id="table-container">
    <table id="example" lay-filter="demo" lay-data="{data: demoData}">
        <thead>
            <tr>
                <!-- 表头列 -->
            </tr>
        </thead>
        <tbody>
            <!-- 表格数据 -->
        </tbody>
    </table>
</div>

2. 然后，在CSS中添加或修改以下几个规则：

#table-container {
    /* 容器设置 */
    height: 400px; /* 或者自适应，例如max- 50px); */
    overflow-y: auto;
    position: relative;
}

#example thead {
    /* 保持表头在容器顶部 */
    position: sticky;
    top: 0;
    background-color: #f2f2f2; /* 表头背景色，可以根据需要调整 */
    z-index: 1;
}

/* 如果需要，为滚动后的 tbody 添加样式，使其与表头对齐 */
#example tbody tr {
    display: flex;
    align-items: flex-start;
}

这里的`overflow-y: auto`会使滚动条出现，而`position: sticky`会让thead始终保持在视口的顶部。`z-index`确保了表头不会被滚动条遮挡。