如何设置HTML表格的内边距？CELLPADDING属性控制文字间距

CELLPADDING已废弃，必须用CSS padding替代；它仅控制单元格内容到边框距离，与文字行高、字间距无关，应作用于td/th元素而非table，支持多方向、响应式及单位灵活设置。

CELLPADDING不是用来控制文字间距的

它只影响单元格内容（包括文字、图片等）到该单元格自身边框的距离，和文字行高、字间距（letter-spacing）、词间距（word-spacing）完全无关。常见误解是调大cellpadding就能“让文字更松散”，实际只是把文字整体往外推，行内间隙没变——真正管文字疏密的是line-height、letter-spacing这些CSS属性。

用CSS padding替代cellpadding的实操写法

目标必须落在td和th上，而不是table标签本身：table设padding无效，浏览器会忽略。

• 统一设置：写td, th { padding: 8px 12px; }，上下8px、左右12px
• 差异化控制：给特定列加class="status-cell"，再配.status-cell { padding: 4px 6px; }
• 响应式缩放：用@media (max-width: 768px) { td, th { padding: 4px 6px; } }在小屏收紧
• 避免单位陷阱：用em或rem时，若父容器font-size动态变化，padding值会浮动；日常开发优先用px或固定rem

为什么直接删掉cellpadding属性可能出问题

老项目里硬编码的cellpadding="5"如果直接删掉，所有单元格内边距会回退到浏览器默认值（通常是1–2px），视觉上突然收紧，容易漏测。稳妥过渡方式是：

• 保留原有cellpadding属性，同时加等效CSS：td, th { padding: 5px; }
• 若需JS动态读取旧值：document.querySelectorAll('td, th').forEach(el => el.style.padding = el.parentElement.cellPadding + 'px')
• 注意：table.cellPadding是DOM属性，修改它不会触发CSS transition动画；而直接改style.padding或class可以

容易被忽略的细节：border-collapse对padding的影响

当表格用了border-collapse: collapse（默认值），单元格边框会合并，此时padding依然生效，但border-spacing失效。很多人误以为“撑不开行高”是padding不够，其实更可能是line-height太小或min-height未设——padding只推内容，不拉高行框；真正控行高的，是line-height或min-height。

立即学习“前端免费学习笔记（深入）”；