cellpadding属性浏览器仍兼容但HTML5已废弃，不该再用；它仅作用于整表、不支持响应式和差异化控制，应改用CSS的padding属性精准设置td/th内边距。
cellpadding 属性还能用吗？浏览器兼容但标准已淘汰
能用，但不该用。cellpadding 在所有现代浏览器里仍能解析并生效，但它在 HTML5 中属于 obsolete（废弃）属性。W3C 校验器会报 warning，严格模式下无法通过语义检查。它不是“坏了”，而是“过时了”——就像还在用软盘驱动器读取 U 盘一样，物理上可行，逻辑上不合理。
常见错误现象：cellpadding="8" 写进 <table> 标签后，内边距没变化。原因通常是 CSS 中写了 td, th { padding: 0; }，直接覆盖了 HTML 属性；或者表格用了 border-collapse: collapse，但开发者误以为这会影响 cellpadding（其实不影响，它只管内容到边框距离）。
-
cellpadding只接受整数像素值，比如cellpadding="6"，不能写cellpadding="0.5rem"或百分比 - 它作用于整个表格，无法单独控制
<th>和<td>的差异，也无法响应式缩放 - 如果表格嵌套（
<table>里再套<table>），外层cellpadding不会透传给内层
用 CSS padding 替代 cellpadding 的实操要点
正确做法是把样式逻辑从标签里剥离出来，统一用 padding 控制 <td> 和 <th>。这不是“多此一举”，而是解决真实问题的必要步骤。
典型场景：表头需要更大留白，数据单元格保持紧凑；小屏设备需缩小内边距避免溢出；某些列要右对齐+右侧加大 padding 避免文字贴边。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
td, th { padding: 6px 12px; }—— 上下 6px，左右 12px - 区分表头与数据：
th { padding: 10px 16px 8px; } td { padding: 4px 12px; } - 单独调整某列：
td:nth-child(3) { padding-left: 24px; }，配合图标或状态标识 - 响应式收缩：
@media (max-width: 768px) { td, th { padding: 4px 8px; } }
注意：<table> 元素本身不支持 padding，设了也无效。别在 <table style="padding: 10px"> 里浪费时间。
为什么 padding-top/padding-bottom 有时撑不开行高？
这不是 bug，是 CSS 行盒（line box）渲染机制导致的。当单元格内容只有一行文本，且 line-height 小于 padding-top + padding-bottom + 字体高度 时，视觉上“留白被吃掉”，文字看似顶到上边框。
常见踩坑：盲目加大 padding 想“拉开行间距”，结果表格整体变宽、列错位、响应式失效。
- 优先调
line-height：比如td { line-height: 1.5; }，比硬加 padding 更可控 - 需要精确控制上下留白时，用
min-height+display: flex; align-items: center;更稳 - 若内容含图片或 inline-block 元素，
vertical-align: middle必须同步设置，否则 padding 上下不对称
旧项目里怎么安全过渡到 CSS padding？
直接删掉 cellpadding 属性可能触发 UI 回归问题，尤其当多个团队共用同一套模板时。稳妥做法是“双轨并行”：保留 HTML 属性，同时注入等效 CSS。
最简方案：<table cellpadding="8"><tr><td style="padding: 8px;">内容</td></tr></table> —— 内联 style 覆盖属性，无需 JS。
- 批量处理可用正则：
cellpadding="(\d+)"→ 替换为cellpadding="$1" style="padding: $1px;" - 若需动态适配，用 JS 读取：
el.parentElement.cellPadding获取值，再赋给el.style.padding - 注意：IE8 及更早版本不支持
cellPadding属性名（大小写敏感），要用cellpadding字符串匹配
真正难的不是语法迁移，而是确认所有 <th> 是否都继承了新 padding 规则——表头常被漏掉，导致视觉节奏断裂。
