调查页面表格颜色块上下留白问题求助

问题出在几个默认样式的影响上：

• <img> 属于行内替换元素，默认会和文字基线对齐，导致底部出现空白
• 表格单元格默认带有内边距（padding）
• 表格默认的边框间距（border-spacing）也会间接造成视觉上的留白

下面给你两个直接可行的修改方案：

方案1：调整图片样式+清除单元格内边距 #

给图片设置 display: block 消除行内元素的基线空白，同时把单元格的内边距设为0，再给表格添加边框合并规则：

// 创建表格时添加border-collapse: collapse，消除单元格间距
survey = "<table style='margin:0px auto; border-collapse: collapse;' dir='ltr'>";

// Original行修改
survey += "<tr><td style='text-align: center; background-color: gray; padding:0;'>Original</td>";
survey += $"<td width='500' style='text-align: left; padding:0;'><img src='Images/Red.png' style='display:block; height:50px; width:{w[0]}'></td></tr>";

// Prequel行修改
survey += "<tr><td style='text-align: center; background-color: gray; padding:0;'>Prequel</td>";
survey += $"<td style='text-align: left; padding:0;'><img src='Images/Yellow.png' style='display:block; height:50px; width:{w[1]}'></td></tr>";

// Sequel行修改
survey += "<tr><td style='text-align: center; background-color: gray; padding:0;'>Sequel</td>";
survey += $"<td style='text-align: left; padding:0;'><img src='Images/Green.png' style='display:block; height:50px; width:{w[2]}'></td></tr>";

survey += "</table>";

方案2：用背景色代替img标签（更简洁高效） #

既然只是展示颜色进度块，完全可以不用img标签，直接给单元格内的div设置背景色和宽度，彻底避免图片带来的样式问题：

survey = "<table style='margin:0px auto; border-collapse: collapse;' dir='ltr'>";

// Original行：用div背景色实现进度条
survey += "<tr><td style='text-align: center; background-color: gray; padding:0; height:50px;'>Original</td>";
survey += $"<td style='padding:0;'><div style='width:{w[0]}; height:50px; background-color: red;'></div></td></tr>";

// Prequel行
survey += "<tr><td style='text-align: center; background-color: gray; padding:0; height:50px;'>Prequel</td>";
survey += $"<td style='padding:0;'><div style='width:{w[1]}; height:50px; background-color: yellow;'></div></td></tr>";

// Sequel行
survey += "<tr><td style='text-align: center; background-color: gray; padding:0; height:50px;'>Sequel</td>";
survey += $"<td style='padding:0;'><div style='width:{w[2]}; height:50px; background-color: green;'></div></td></tr>";

survey += "</table>";

关键修改点说明： #

1. 表格添加 border-collapse: collapse：消除单元格之间的默认间距
2. 所有td设置 padding:0：去掉单元格默认的内边距
3. 方案1中给img加 display:block：解决行内元素的基线留白问题
4. 方案2用div+背景色替代img：更高效，也避免了图片加载相关的潜在问题

内容的提问来源于stack exchange，提问作者Itamar Dalal