Layui表格列对齐必须在cols数组中为单列配置align，如align: 'right'，不支持全局CSS设置；可选值仅left/center/right；配合style微调间距，空单元格在Firefox中需特殊处理。
layui table 的 align 配置只对单列生效，不是全局样式
很多人试过在 table.render() 外层加 css 或给整个表格设 text-align: right，结果所有列都右对齐了——这不对。layui 表格的列对齐必须落到具体某列的配置项上，靠 css 覆盖容易失效或影响其他列。
正确做法是在列定义（cols 数组）里，给目标列加上 align: 'right'：
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', align: 'right'}, // ✅ 只这一列右对齐
{field: 'email', title: '邮箱'}
]]
});</p>
<ul>
<li><code>align</code> 可选值只有 <code>'left'</code>、<code>'center'</code>、<code>'right'</code>，不支持 <code>'end'</code> 或 CSS 里的 <code>flex-end</code></li>
<li>如果列用了 <code>templet</code> 自定义内容，<code>align</code> 仍会作用于该列容器，但内部 HTML 若有 <code>text-align</code> 会优先级更高，可能覆盖掉</li>
<li>数字类字段（如金额、序号）建议显式加 <code>align: 'right'</code>，避免和中文混排时视觉错位</li>
</ul>
<H3>用 <code>style</code> 配合 <code>align</code> 微调文字位置更稳妥</H3>
<p>单纯靠 <code>align: 'right'</code> 有时不够：比如数字带千分位逗号、负号在前，或者单元格内有图标+文字组合，右对齐后空隙难控制。这时候得补一层内联样式。</p>
<p>在列配置中用 <code>style</code> 字段直接写 CSS，它会加到该列每个 <code><td></code> 上：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img
src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro">深蓝色网站后台管理系统layui框架模板-AdminPro</a>
<p>一款深蓝色网站后台管理系统layui框架模板</p>
</div>
<a href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;">{field: 'price', title: '价格', align: 'right', style: 'padding-right: 12px;'}
-
style是字符串，不是对象，别写成style: {paddingRight: '12px'} - 慎用
text-align在style里重复声明，会和align冲突；优先用align控制对齐，style只管间距/颜色等辅助样式 - 如果要让数字右对齐但小数点对齐（如财务场景），Layui 原生不支持，得用
templet+ 等宽字体 +text-align: right模拟，但这已超出单列对齐范畴
动态列或后台返回列结构时，align 必须在服务端或 JS 组装阶段注入
如果你的 cols 是从接口拿的，比如后端返回字段列表，那 align: 'right' 不能靠前端“事后补”，因为 table.render() 读取的是初始数组快照。
- 推荐在请求回来后、调用
table.render()前，用 JS 遍历列数组，按字段名匹配并插入align： cols[0].forEach(col => { if (col.field === 'amount') col.align = 'right'; });- 别在
done回调里改列配置——此时表格已渲染完，再改无效 - 如果列是响应式生成（比如拖拽排序后重绘），每次重绘都要重新注入
align，否则会丢失
注意 Firefox 下 align: 'right' 对空单元格可能不生效
Firefox 渲染表格时，若某单元格内容为空（null、undefined 或空字符串），align: 'right' 有时不触发，看起来像左对齐。这不是 bug，是浏览器对空内容的默认处理差异。
- 临时解法：在
templet或后端返回数据时，把空值转成' '（非断行空格） - 更稳的做法：用
style强制设置text-align: right !important，但仅限必要列，避免污染 - 这个现象在 Chrome / Edge 里通常不出现，所以本地测完还得切浏览器验证
列对齐看着简单，但跨浏览器、动态列、自定义模板这三块最容易漏掉细节。尤其是空值和 templet 共存时，光靠 align 不够，得配合 style 或数据预处理。
