根本原因是td默认padding与表格渲染机制共同作用；必须清空td的padding:0，配合table-layout:fixed、display:block及line-height:0等组合控制，单一样式无效。
HTML表格布局中图片尺寸错位、留白、裁剪异常，根本原因不是图片本身，而是 td 默认的 padding 和表格渲染机制共同作用的结果。直接设 width/height 在 img 上往往无效，必须从单元格和表格结构入手控制。
为什么图片在 td 里总出现白边或裂缝
浏览器默认给 td 设置了上下左右 padding（通常是 2px），而你切的顶部/底部图是按「单元格内容区高度」精准裁剪的。一旦 td 实际高度 = 图片高度 + padding × 2，就会露出背景色或导致平铺断裂——这就是你看到的“顶图上边有白色区域”“底图多出一条线”的真实原因。
解决方法只有一个：显式清空所有相关 td 的 padding，且必须用 padding: 0，不能只写 padding-top: 0 或依赖 border-collapse。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
td标签内联样式必须包含padding: 0，哪怕其他样式已设background-image - 如果用了外部 CSS，确保选择器权重足够高，能覆盖浏览器默认或框架重置样式
- 注意：
border-collapse: collapse只影响边框合并，对padding无效
table-layout: fixed 对图片尺寸的影响
当表格用于布局（比如三段式页头-主体-页脚），且每行 td 都塞了背景图，table-layout: fixed 是稳定尺寸的关键。它让表格列宽由第一行（或 col 元素）决定，后续行不再因内容撑开，避免图片被拉伸或压缩。
- 必须配合明确的列宽设定：在第一行
tr的td上设width，或用<col width="900">显式声明 - 若没设
table-layout: fixed，表格会按内容自动计算列宽，图片可能被强制缩放或溢出 -
height属性在td上仅作最小高度参考，实际高度仍受 padding 和 line-height 影响
背景图 vs <img>：哪种更适合表格布局
在纯视觉分段布局（如切图拼接页眉/页脚）中，background-image 是更可控的选择；但若需响应式缩放、可访问性（alt 文本）、SEO 或用户右键保存，必须用 <img> 标签。
- 用
background-image时：确保td高度严格等于图片原始尺寸，且padding: 0、line-height: 0、font-size: 0全部清零，防止文本占位干扰 - 用
<img>时：给img设display: block（消除行内元素默认基线间隙），再配max-width: 100%和height: auto防溢出 - 二者都别依赖
cellpadding或cellspacing属性——这些 HTML 属性已被现代 CSS 取代，且优先级低于内联样式
真正容易被忽略的点是：表格布局中图片问题从来不是单一样式能解决的，它总是 padding + table-layout + display + line-height 四者联动失效的结果。调一个，漏一个，裂缝就回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
