layui table移动端适配需禁用width配置和autoResize，添加overflow-x: auto样式；改用touchstart事件代理替代click；CSS锁定表头与主体滚动同步；媒体查询增大字体、行高及按钮热区。
layui table 宽度超出屏幕时内容被截断
默认情况下 layui.table 用的是固定列宽 + 横向滚动容器，手机上直接撑破 viewport，右侧内容看不见。这不是 bug，是它默认不启用响应式——得手动关掉固定宽度逻辑。
关键操作是禁用 width 配置、开启 autoResize: false（反直觉但有效），再配合 CSS 强制表格流式缩放：
- 删掉所有列的
width字段，包括minWidth - 在
table.render()配置里加autoResize: false，否则 layui 会重算列宽并强行设固定像素值 - 给容器加
style="overflow-x: auto;"，让横向滚动只作用于表格区域，不影响页面其他布局
手机端点击行/单元格无法触发事件
因为 layui.table 的行事件（如 rowDouble、tool）默认绑定在 tr 上，而小屏触摸有 300ms 延迟和点击穿透问题，容易失焦或误判。
实操建议优先用 event 代理 + touchstart 替代 click：
- 不要依赖
lay-event属性触发工具栏按钮，改用table.on('row(test)', ...)监听整行 - 在监听回调里用
e.target判断点击位置，区分是点在文本还是操作列 - 加一行
document.body.style.webkitTouchCallout = 'none';防 iOS 长按弹出菜单干扰
表头与内容列错位（尤其左右滚动后）
这是最常被忽略的坑：layui 表格的表头（.layui-table-header）和主体（.layui-table-body）是两个独立滚动容器，手机端 touch 滚动惯性大，稍快一点就会不同步，导致表头漂移。
根本解法不是调 JS，而是用 CSS 锁定同步关系：
- 给
.layui-table-box加overflow-x: auto; -webkit-overflow-scrolling: touch; - 删掉
.layui-table-header和.layui-table-body上可能存在的overflow冗余设置 - 确保表格没有设置
table-layout: fixed，保留默认的auto，否则列宽计算在小屏下彻底失控
移动端字体太小、操作热区不足
layui 默认用 12px 字体 + 24px 行高，在手机上几乎没法看清，更别说点击了。这不是适配问题，是样式没覆盖到。
必须通过 CSS 覆盖，且不能只改 .layui-table td，要连带表头、分页、工具栏一起调：
- 用媒体查询限定范围：
@media (max-width: 768px) { .layui-table td, .layui-table th { padding: 12px 8px; font-size: 14px; } } - 把
.layui-table-tool .layui-btn的height和line-height改成36px，按钮才够按 - 分页数字太挤？加
.layui-laypage a { min-width: 32px; padding: 0 8px; }
复杂点在于，这些样式必须比 layui 自带的 CSS 权重高，建议加 !important 或者把自定义样式放在 layui.css 后面加载。不然改了等于没改。
