layui.table 默认不支持隔行换色，需手动通过 done 回调遍历有效数据行并添加 .layui-table-striped 类，再配合 CSS 设置背景色及 hover、选中态样式，以兼容 fixed 列、虚拟滚动等复杂场景。
layui.table 默认不支持隔行换色，得手动加 CSS
layui 的 table.render() 渲染后生成的是普通 <table> 结构，没有内置的斑马纹（zebra striping）类或配置项。官方文档里也找不到 <code>stripe: true 这种开关 —— 它压根没提供这个功能。
所以不能指望靠配置开启，必须自己写样式。最稳妥的方式是给表格容器加个自定义 class，再用 CSS 的 :nth-child(odd/even) 控制背景色。
- 别直接选
.layui-table tr，因为 layui 表格有表头、固定列、合计行等，容易误命中 - 推荐在
render()时通过elem指定一个带 id 或 class 的容器，比如elem: '#userTable' - 然后写 CSS：
#userTable .layui-table tbody tr:nth-child(odd) { background-color: #f8f9fa; }
固定列和滚动表格下，:nth-child 会失效
当表格启用了 fixed: 'left' 或设置了 height 触发虚拟滚动时，layui 会把 tbody 拆成多个独立的 <table> 块（主表体 + 左右固定列），此时 <code>:nth-child 只作用于各自 tbody 内的 tr，导致“隔行”在视觉上断开、错位。
解决办法是改用 JS 动态打标，渲染完成后遍历所有真实数据行（排除表头、合计、空数据提示等）：
table.on('renderDone(filter)', function(obj){
// 只处理数据行，跳过 th、.layui-table-empty、.layui-table-total 等
obj.elem.next('.layui-table-box').find('.layui-table-body tbody tr').each(function(i){
$(this).toggleClass('layui-table-striped', i % 2 === 0);
});
});
同时配一条 CSS：.layui-table-striped { background-color: #f8f9fa !important; }
主题色变化时，手写 CSS 容易漏掉 hover 和选中态
单纯加 background-color 隔行，但用户 hover 某行时，如果没覆盖 hover 样式，就会看到颜色打架；同理，多选模式下被选中的行也可能被隔行色盖住。
- 务必补全：
.layui-table tbody tr:hover { background-color: #e9ecef !important; } - 选中态（checkbox/radio 模式）需要额外处理：
.layui-table tbody tr:hover, .layui-table tbody tr.layui-table-hover { background-color: #e9ecef !important; } - 如果用了深色主题，记得同步调整文字色，避免灰字配浅灰底看不清
用 done 回调比 renderDone 更可靠
renderDone 是 table 模块的事件，但某些场景（如异步加载、重载、分页切换）它不一定触发；而 done 是 render() 的原生回调，只要渲染完成就执行，时机更稳。
实操建议：所有动态加样式逻辑都塞进 done 里，尤其涉及 DOM 查找和批量操作时：
table.render({
elem: '#demo',
url: '/api/list',
done: function(res, curr, count){
// 此处操作 DOM 最安全：tbody 已存在，数据已注入
const $body = $(this.elem).next('.layui-table-box').find('.layui-table-body tbody');
$body.find('tr').filter(':not(.layui-table-header, .layui-table-empty, .layui-table-total)').each(function(i){
$(this).toggleClass('layui-table-striped', i % 2 === 0);
});
}
});
真正麻烦的不是加颜色，而是表格结构随时可能因 fixed / height / toolbar / totalRow 等配置变得复杂，这时候纯 CSS 就会失灵，必须靠 JS 精准识别“有效数据行”。动手前先用浏览器审查元素看看 tbody 里到底有几个 table、哪些 tr 是真数据——这一步省不得。
