无法移除表格单元格内边距的技术求助

嘿，我看你已经折腾好久了——明明给td和th都设了padding:0，单元格却还是有看起来像内边距的空白。其实问题出在两个容易忽略的地方，咱们一步步来搞定：

核心问题1：单元格里的空白字符在捣乱 #

你在JS动态创建单元格的时候，给它塞了&nbsp（也就是HTML空格字符），这个家伙会在单元格里占据空间，看起来就像是内边距没消掉。

修改JS代码里的这一行：

// 原来的代码：
cell.innerHTML='&nbsp'
// 改成空内容：
cell.innerHTML = ''

这样初始状态下单元格是空的，不会有额外的空白占位。

核心问题2：确保CSS样式优先级足够，覆盖默认浏览器样式 #

浏览器自带的user agent样式可能会给表格元素偷偷加padding，咱们得用更明确的选择器和优先级来覆盖它。

更新你的CSS代码：

*{ 
  padding: 0; 
  margin: 0; 
  font-family: "Trebuchet MS", Times, serif; 
  box-sizing:border-box; 
}
html{ 
  background-color: #35454E; 
  overflow: hidden; 
}
html *{ 
  font-family: "Work Sans", Arial, sans-serif !important; 
  color: white !important; 
}
table{ 
  border-collapse: collapse; 
  border-spacing: 0; /* 用0替代0px，更规范 */
  color:#35454E; 
  height:100%; 
  width:100%; 
}
/* 统一设置th和td的样式，避免重复代码，同时提升优先级 */
table th, table td{
  border: 2px solid white;
  padding: 0 !important; /* 用!important确保覆盖所有默认样式 */
  vertical-align: top;
  text-align: center;
  font-size: 2.5vw;
  box-sizing: border-box;
}
td{ 
  position: relative; /* td单独需要的样式保留 */
}
.cellInputs{ 
  position: absolute; 
  width:100%; 
  height:100%; 
  display: block; 
  top:0; 
  left:0; 
  border:none; 
  text-align: center; 
  background-color: #35454E; 
  word-wrap: break-word; 
  font-size: 2.5vw; 
}

额外小提示：清理HTML里的多余空白 #

有时候HTML标签之间的换行和空格也会产生细微的空白，比如表格的<tr>和<th>之间的空格，你可以把表格代码写得紧凑一点，比如：

<tbody>
  <tr><th>Balance</th></tr>
  <tr><th>Pay</th></tr>
  <tr><th>&amp;nbsp</th></tr>
  <!-- 其他行同理 -->
</tbody>

不过这个影响比较小，主要还是前面两个步骤解决核心问题。

做完这些修改后，表格的内边距应该就彻底消失了，点击单元格弹出的输入框也会完全填满单元格哦！

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