Layui 默认不响应式，需手动禁用列宽锁定和autoResize、添加viewport标签、用CSS修复滚动同步及触控交互。
直接说结论：layui 默认不响应式，手机端表格撑破屏幕、点击失灵、表头错位，不是你配置错了，是它压根没开响应式开关——得手动关掉固定宽度逻辑、禁用自动重算、补全 viewport 和 css 覆盖。
禁用 width 和 autoResize: true 才能启用流式表格
Layui 表格在手机上内容被截断，根本原因是默认开启列宽锁定 + 自动重算。哪怕你写了 width: 150 或没写但用了 minWidth，它都会转成固定像素值，撑爆 viewport。
- 删掉所有列配置里的
width和minWidth字段（包括隐藏列） - 在
table.render()配置中显式写autoResize: false（别信文档里“默认 false”，实际 v2.9.x 默认是true） - 容器外层必须加
style="overflow-x: auto;"，否则横向滚动会作用到整个页面 - 确保父容器没有
table-layout: fixed，保留默认auto，否则小屏列宽计算彻底失控
用 touchstart 代理替代 click 解决点击失效
手机端点表格行没反应、工具栏按钮点不中，是因为 layui 绑定的是 click，而 iOS/Android 的触摸延迟和穿透机制会让事件丢失或误判。
- 不要依赖
lay-event属性触发按钮，改用table.on('row(test)', ...)监听整行 - 在回调里用
e.target判断点击位置，比如e.target.matches('.del-btn')区分操作列和文本区 - 加一行
document.body.style.webkitTouchCallout = 'none';，防 iOS 长按弹出菜单遮挡 - 避免给
tr设cursor: pointer，移动端无效还可能干扰 touch 事件流
CSS 锁定表头与主体滚动同步，防止左右滑动后错位
表头漂移不是 JS 没监听好，是两个滚动容器（.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声明（尤其是hidden） - 确认
.layui-table没被父级设置transform或will-change，这会导致滚动容器层级分离
媒体查询必须覆盖字体、行高、按钮热区，不能只调 td
12px 字体 + 24px 行高在手机上根本没法看，更别说点了。这不是“适配”，是基础可访问性缺失。
- 用
@media (max-width: 768px)包裹整套样式，别漏掉表头th、分页栏、工具栏按钮 -
.layui-table td, .layui-table th至少设font-size: 14px; padding: 12px 8px; -
.layui-table-tool .layui-btn的height和line-height必须设为36px，不然拇指按不到 - 加
* { touch-action: manipulation; }，提升滚动和点击响应速度
最常被跳过的其实是 viewport 标签——没它，上面所有 CSS 和 JS 都白调。务必在 <head> 里加上 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">，否则连媒体查询都可能不触发。
