应直接为td和th设置CSS padding，因table不支持内边距且cellpadding已废弃；常见失效原因是CSS覆盖、border-collapse影响或误在table上设padding。

直接给 td 和 th 元素设 padding，别碰 table 标签上的 cellpadding 属性——它已废弃，且一写 CSS 就失效。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

为什么给 table 写 padding 没用？

table 元素本身不支持内边距，浏览器会忽略 table { padding: 10px; } 这类声明。真正起作用的是作用在单元格上的样式。

• 常见错误：在 <table style="padding: 12px"> 里加内边距，结果内容纹丝不动 <li>正确目标：必须选中 <code>td 或 th，例如 td, th { padding: 8px 12px; }
• 表头和数据行需要不同留白？分开写：th { padding: 10px 16px 6px; } + td { padding: 6px 12px; }

cellpadding 看起来没生效，其实早被 CSS 覆盖了

写了 <table cellpadding="8"> 却没变化，大概率是项目里某处 CSS 已经声明了 <code>td, th { padding: 0; } 或类似规则——CSS 优先级永远高于 HTML 属性。

• 检查 DevTools 的 computed 样式，看 padding 值来源是 CSS 还是 HTML 属性
• cellpadding 只接受整数像素值（如 "6"），不能写 "0.5rem" 或百分比
• 它无法区分 <th> 和 <code><td>，也无法响应式缩放，改用 CSS 才能解决真实需求 <h3> <code>border-collapse: collapse 是控制 padding 行为的关键前提

  默认情况下表格使用 border-collapse: separate，此时 padding 和 border-spacing 会叠加，容易让行高突兀、列宽失控。90% 的“内边距不对”问题都源于没显式设这个。

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

  • 推荐基础组合：table { border-collapse: collapse; } + td, th { padding: 8px 12px; }
  • 如果用了 border-collapse: separate（比如要保留双边框），那 border-spacing 才有效，padding 仅作用于单元格内部
  • 别同时加大 padding 和 border-spacing，否则实际间距远超预期

  真正容易被忽略的是：padding 值会和 line-height 叠加影响最终行高——单行文本下，padding-top + line-height + padding-bottom 才是视觉高度，调试时得一起看 computed styles 里的这三个值。