layui复选框列宽度不能直接设width，因其内置列硬编码为36px且不响应width配置；需用css强制设置first-child的width/min-width/max-width为40px或44px并加!important，同时重置.checkbox margin为0以避免错位。
layui table 复选框列宽度为什么不能直接设 width？
因为 Layui 的复选框列（type: 'checkbox'）是内置列，不走常规列宽计算逻辑。你给它设 width: 50 或 width: '50px' 都会被忽略——Layui 内部硬编码了该列宽度为 36px（含内边距），且未暴露配置入口。
用 style 覆盖复选框列的最小宽度
实际生效的方式是通过 CSS 强制约束表格第一列（即复选框列）的 min-width 和 width，同时防止内容撑开。注意：必须加 !important，否则被 Layui 内联样式覆盖。
在初始化表格前或之后插入以下样式：
/* 覆盖复选框列，假设是第一列 */
.layui-table tbody tr td:first-child,
.layui-table thead tr th:first-child {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
}
/* 可选：隐藏可能溢出的 checkbox 容器文字 */
.layui-table tbody tr td:first-child .layui-form-checkbox {
margin: 0 auto;
}
- 值设为
40px是常见选择（比默认36px略宽，留出点击余量） - 必须同时写
width、min-width、max-width，仅一个不够稳定 - 如果表格启用了
skin: 'line'或'nob'，选择器要加对应 class 限定
用 fixed 列 + 自定义复选框模拟固定宽
当上面 CSS 方式失效（比如用了自定义主题或高版本 Layui 有改动），可放弃内置 type: 'checkbox'，改用 type: 'numbers' 占位，再手动加一列 fixed: 'left' 并渲染原生 checkbox。
示例列配置片段：
{
type: 'numbers',
fixed: 'left',
width: 40,
unresize: true,
templet: function(d) {
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" data-index="' + d.LAY_TABLE_INDEX + '">';
}
}
- 务必加
unresize: true，否则用户拖拽列宽会破坏固定效果 -
data-index用于后续 JS 获取选中行，替代原生checkStatus方法 - 需自行绑定
change事件管理全选/反选逻辑，Layui 不再自动维护table.checkStatus()
为什么改完宽度后复选框错位或点击区域变小？
本质是 checkbox 的 margin 和 padding 在窄空间里被截断或重叠。Layui 的 .layui-form-checkbox 默认带 margin: 0 10px，在 40px 宽度下会挤出边界。
- 解决办法：重置 checkbox 内边距：
.layui-form-checkbox { margin: 0 !important; } - 若用
templet手动渲染，建议用<div class="layui-form-checkbox"><span></span></div>结构，并补上lay-skin="primary" - 移动端要注意：小于
44px的点击区域违反 iOS 触控规范，易误操作
最稳的宽度是 44px，兼容触控和视觉留白。低于这个值，就得接受部分设备点击不准——这不是代码问题，是物理交互限制。
