必须手动绑定toolbar按钮点击事件并监听table.on("tool(表名)")，通过addClass/removeClass切换预设字号类，同步更新th/td/固定列，再调用table.resize()重算列宽。
表格工具栏按钮如何绑定字号控制逻辑
直接在 toolbar 配置里加按钮是没用的——layui 的表格工具栏默认只响应内置事件（如 lay-event="del"），不自动执行任意 js。必须手动绑定点击事件，并拿到当前表格实例才能操作行内 dom。
常见错误是把按钮写成普通 HTML 后就以为能触发，结果点击完全没反应；或者用了 lay-event 却没在 on("tool") 里处理，导致事件监听失效。
- 按钮必须放在
toolbar对应的模板字符串中，且带唯一lay-event值，比如lay-event="set-font-size" - 必须用
table.on("tool(你的表名)", ...)监听该事件，不能写成on("tool")（漏掉过滤器） - 字号修改不能只改
<td>，要同步改 <code><th> 和可能存在的固定列、合计行等，否则视觉错乱 <h3>如何安全地批量修改所有行字体大小</h3> <p>Layui 表格渲染后，数据行在 <code>.layui-table-body tbody tr下，但直接用$("tbody tr td")会误改分页栏、加载提示等非数据区域。更稳妥的方式是通过表格实例的config.elem定位专属容器。另外，用
css("font-size")覆盖会破坏原有 em/rem 设置，推荐用 class 切换——提前定义好.layui-table-sm、.layui-table-lg这类语义化类名，再用addClass/removeClass控制。- 不要用
document.querySelectorAll("td")，优先走tableIns.config.elem.find("tbody td, thead th") - 避免直接设
style="font-size:14px"，否则后续用 CSS 覆盖困难；统一用 class 控制，比如layui-table-font-sm - 记得重置
.layui-table-fixed里的对应列，否则左右滚动时字号不一致
如何让字号变化实时生效且不破坏表格布局
单纯改 font-size 可能导致单元格高度塌陷或文字溢出，尤其当内容含多行文本或图标时。Layui 的
cellMinWidth和minWidth是基于默认字号计算的，字号变大后需手动调用table.resize()重新测量列宽。另一个坑是：如果表格启用了
height固定高度，增大字号后行高超出，会出现滚动条遮挡或内容截断——此时要么取消 height，要么配合cellHeight动态调整行高。- 每次修改字号后，必须调用
table.resize(tableIns.config.id)，否则列宽不会自适应 - 若设置了
height: 500，建议同时用css("line-height", "24px")匹配新字号，防止行高挤压 - 图标字体（如
）字号会随父级变化，无需单独处理，但要确认 iconfont 文件支持缩放
完整可运行的最小改动示例
假设表格容器 ID 是
demo，工具栏按钮要控制三档字号（12px / 14px / 16px）：<script type="text/html" id="TABLE_TOOLBAR"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="font-sm">小 <button class="layui-btn layui-btn-sm" lay-event="font-md">中 <button class="layui-btn layui-btn-sm" lay-event="font-lg">大 </script><script> table.render({ elem: '#demo', toolbar: '#TABLE_TOOLBAR', // ...其他配置 }); table.on('tool(demo)', function(obj){ const $ = layui.jquery; const tableIns = obj.config; const $table = tableIns.config.elem; if(obj.event === 'font-sm'){ $table.removeClass('layui-table-font-md layui-table-font-lg').addClass('layui-table-font-sm'); } else if(obj.event === 'font-md'){ $table.removeClass('layui-table-font-sm layui-table-font-lg').addClass('layui-table-font-md'); } else if(obj.event === 'font-lg'){ $table.removeClass('layui-table-font-sm layui-table-font-md').addClass('layui-table-font-lg'); } table.resize(tableIns.config.id); // 关键：重算列宽 }); </script>
CSS 部分只需补充三类样式，作用于整个表格容器即可，不用侵入每列：
.layui-table-font-sm .layui-table-body td, .layui-table-font-sm .layui-table-header th { font-size: 12px; } .layui-table-font-md .layui-table-body td, .layui-table-font-md .layui-table-header th { font-size: 14px; } .layui-table-font-lg .layui-table-body td, .layui-table-font-lg .layui-table-header th { font-size: 16px; }真正麻烦的不是加按钮，而是确保所有浮动层（如弹出菜单、下拉选择器）、固定列、甚至打印样式都跟着字号同步变化——这些往往被忽略，直到用户反馈“导出 PDF 字太小”才想起来补。
- 不要用
