如何控制表格单元格之间的间隙宽度_CELLSPACING属性设置-html教程-PHP中文网

cellspacing是html5已废弃的table属性，仅用于设置单元格间固定像素间距，不支持响应式、无法区分水平/垂直值，且与border-collapse:collapse冲突；现代开发应使用css的border-spacing配合border-collapse:separate控制。

如何控制表格单元格之间的间隙宽度_cellspacing属性设置

直接用 cellspacing 属性设置表格单元格间隙，在现代开发中不推荐，它已被 HTML5 废弃，且无法响应式、无法差异化控制，只适合临时调试或兼容极旧系统。

cellspacing 属性怎么写才生效

必须写在 <table> 标签内，作为 HTML 属性，不能通过 CSS 选择器覆盖或继承。 <ul> <li> <code>cellspacing 值为非负整数（单位像素），如 cellspacing="0"、cellspacing="8"

设为 0 时，相邻单元格边框会紧贴（前提是未启用 border-collapse: collapse）

设为负值会触发解析错误，浏览器通常忽略或报错

该属性对

<th> 和 <code><td> 一视同仁，无法单独控制某行/列


<h3>border-spacing 替代 cellspacing 的实操要点</h3>
<p><code>border-spacing

是当前标准方案，但必须配合 border-collapse: separate（默认值）才能起作用；一旦设成 collapse，这个属性就完全失效。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

统一设置： style="border-spacing: 12px;" → 水平与垂直均为 12px
分别设置： style="border-spacing: 8px 4px;" → 水平 8px，垂直 4px
若表格已全局设了 border-collapse: collapse，需在具体 <table> 上显式重置为 <code>separate
IE8+ 全支持，IE7 及更早版本不支持 border-spacing，只能靠 cellspacing 或 JS 模拟

为什么 cellspacing=0 时还有空隙

常见现象是写了 cellspacing="0"，但单元格之间仍有 1–2 像素缝隙，原因通常是：

表格父容器有默认 font-size，而 <table> 默认是 inline-block 行为，导致换行符或空白字符被渲染为空隙 <li>解决方案：给 <code><table> 加 <code>font-size: 0;，再给 <td> 单独设回字体大小 <li>或者改用 <code>border-collapse: collapse;（此时 cellspacing 被无视，但边框真正合并）
注意：border-collapse: collapse 下，相邻边框会叠加而非并排，可能影响边框粗细视觉效果

真正要精细控制表格间隙，得把 border-spacing、padding、border-collapse 三者组合使用——单独依赖 cellspacing 就像用胶带修电路板，能应急，但别指望它长期稳定。特别是当表格需要适配移动端或嵌套在 Flex/Grid 布局里时，内联属性基本失控。