Layui表格不支持width:"30%"等百分比写法，只接受数字像素值；需用像素总和模拟比例，并配合minWidth和table.resize()实现自适应。
Layui 表格不支持 width: "30%" 这类百分比写法——所有稳定版（包括 2.8.x）都会忽略字符串值，导致列消失、错位或渲染异常。所谓“百分比自适应”，本质是靠像素总和模拟比例，再配合容器宽度与 minWidth 动态兜底。
为什么直接写 width: "50%" 会失效
Layui 表格的 width 字段只接受数字（如 150），内部用它做像素级布局计算；传入字符串（"50%"、"150px"、""、null）一律被丢弃。这不是 bug，是设计如此——它压根没实现 CSS 百分比解析逻辑。
常见错误现象：
- 列直接不显示，或只剩表头无数据行
- 表格整体宽度塌缩，出现意外横向滚动条
- 拖拽调整列宽后，其他列突然错位或重叠
用像素总和“假装”百分比布局
核心思路：让所有列的 width 值加起来 ≈ 表格容器宽度（比如 960px），再留一列不设 width 让它自动占满剩余空间。
假设容器宽 960px，三列按 2:3:5 分配：
- 第一列：
width: 192（960 × 0.2） - 第二列：
width: 288（960 × 0.3） - 第三列：
width: 480或直接不填（让它弹性撑开）
注意：minWidth 必须同步设置，否则小屏下会被压缩到不可读。例如：
cols: [[
{field: 'name', title: '姓名', width: 192, minWidth: 120},
{field: 'status', title: '状态', width: 288, minWidth: 100},
{field: 'desc', title: '描述'} // 不设 width，靠 minWidth: 150 保底线
]]
响应式收缩时列宽乱跳？必须配 minWidth + table.resize()
单纯设死 width 在窗口缩小时毫无弹性。真正起作用的是 minWidth（必须为纯数字，"120" 或 "120px" 全无效）。
典型组合策略：
- 内容主列（标题、描述）：不设
width，只设minWidth: 150，让它随容器缩放 - 固定信息列（ID、状态 badge）：
width: 80+minWidth: 80，避免文字挤压变形 - 操作列（按钮组）：
width: 120，通常不宜太窄，且建议加unresize: true禁止拖拽
关键点：每次 DOM 变更（如 tab 切换、弹窗打开、table.hideCol() 后），必须手动调用 table.resize('yourTableId')，否则新 minWidth 不生效。
内容超长却只显示省略号？得改模板 + CSS + 强制重算
Layui 单元格默认 white-space: nowrap，哪怕你删了 width，长文本也会被截断。要真“自适应”，三步缺一不可：
- 列配置里加
templet强制换行：templet: '<div style="white-space: normal; word-break: break-word;">{{d.content}}</div>' - 全局加样式：
.layui-table tbody td { white-space: normal !important; } - 在
done回调里调table.resize()，否则新样式不参与列宽重算
最易忽略的一点：Layui 只扫描首屏数据（约前 20 行）估算列宽。如果最长文本藏在最后一页，列宽永远撑不开——必须在 done 中遍历全部原始数据，取每列最大字符宽度（按字体估算像素），动态注入 minWidth 再 resize。
