必须用.layui-table .layui-table-cell { padding: 0 !important; }覆盖,因Layui将padding设在内部div而非td;去后需同步调line-height和white-space以防文字截断或换行失效。

直接覆盖 .layui-table-cell 的 padding 样式
Layui 表格单元格默认有 padding: 0 15px,这不是浏览器 UA 样式,而是 Layui 自带 CSS 写死的。想彻底去掉,不能靠重置 td 或通配符,必须精准命中它的渲染结构。
实际渲染中,Layui 把每格内容包在 <div class="layui-table-cell"> 里,而这个 div 才是 padding 的载体——<code>td 本身只是容器,几乎没样式。
- 加一条高权重 CSS:
.layui-table .layui-table-cell { padding: 0 !important; } - 务必加
!important:Layui 的 inline style 有时会动态注入 padding(尤其开启cellMinWidth或 resize 后),不加容易被覆盖 - 别只写
td { padding: 0; }:它对 Layui 渲染无效,因为真实内容不在td里,而在内部div中
去掉 padding 后文字贴边、拥挤?补一个最小内边距更稳妥
全清为 0 容易让文字紧贴边框,尤其在启用复选框、操作按钮或图标列时,视觉压迫感强,点击热区也变窄。
推荐用「最小可用值」替代「彻底归零」:
-
.layui-table .layui-table-cell { padding: 4px 8px !important; }—— 比默认窄但留出呼吸感 - 如果某列需完全无边距(如纯图标列),单独加列配置:
{field:'op', title:'操作', style:'padding: 0;'} - 注意:
style属性只作用于该列的.layui-table-cell,不影响其他列,适合局部微调
为什么 * { padding: 0 } 对 layui 表格没用
通配符看似省事,但在 Layui 表格里基本失效,原因很实在:
-
*不匹配伪元素,而 Layui 某些版本会在.layui-table-cell后插入::before占位,其 padding 来自伪元素,通配符管不到 -
.layui-table-box和.layui-table是包裹容器,它们的padding(比如.layui-table-box { padding: 0 15px; })是独立设置的,和td无关,通配符也扫不到 - 浏览器对
table元素的 UA 样式权重较低,但 Layui 的 CSS 权重更高,通配符规则很容易被覆盖
去掉 padding 后行高异常或文字截断?检查 line-height 和 white-space
默认 padding: 0 15px 和 line-height: 40px 是配套设计的。一旦删掉 padding,若没同步调整行高,会出现两种典型问题:
- 文字上下挤压,甚至被裁切:因为
.layui-table-cell高度固定为40px,而内容没了上下留白,line-height又没变,文字就顶到边缘 - 换行失效:默认
white-space: nowrap,去 padding 后若内容略长,会直接溢出而非折行 - 解法很简单:
.layui-table .layui-table-cell { padding: 0; line-height: 36px; white-space: normal; }—— 行高缩一点留出安全边距,white-space: normal开启自动换行
真正难处理的不是“怎么去”,而是“去完之后要不要补、补多少、补在哪一层”。Layui 的表格 DOM 结构嵌套深,样式钩子分散,盲目清空反而比保留可控的最小值更容易引发连锁错位。











