如何移除HTML表格中<td>元素的内边距（cellpadding）？

问题情况 #

我用HTML、CSS和JS制作简易计算器，目前遇到的问题是无法移除计算器表格中<td>元素的内边距。已经给<table>添加了cellspacing="0"和cellpadding="0"属性，还尝试了CSS选择器table { border-collapse: collapse}，但border-collapse不仅没去掉内边距，还导致表格边角错乱。

相关代码 #

CSS代码

/* Global CSS */
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --calc-bg: rgb(184, 243, 216);
  --btn-bg: rgb(252, 246, 230);
  --active-btn-bg: rgb(106, 200, 153);
  --main-btn-bg: rgb(71, 202, 143);
  --text-color: rgb(45, 53, 44);
  --display-bg: rgb(252, 246, 230);
}
/* Calculator CSS */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@900&display=swap');
.calculator {
  font-family: 'Source Code Pro', monospace;
  font-weight: 900;
  padding: 10px;
  border-radius: 2em;
  height: 580px;
  width: 500px;
  margin: auto;
  background-color: var(--calc-bg);
  border: solid rgb(45, 52, 42) 5px;
  -webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
  -moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
  box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
.display-box {
  background-color: var(--display-bg);
  border: solid black 0.5px;
  color: black;
  border-radius: 1em;
  width: 100%;
  height: 80px;
  -webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
  -moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
  box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
#btn {
  background-color: var(--main-btn-bg);
}
th,
td {
  padding: 0;
}
td {
  text-align: center;
  vertical-align: middle;
}
input[type=button] {
  font-weight: 900;
  background-color: var(--btn-bg);
  color: var(--text-color);
  border: solid rgb(45, 52, 42) 2px;
  width: 4rem;
  border-radius: 10%;
  height: 4rem;
  outline: none;
  -webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
  -moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
  box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
input:active[type=button] {
  background: var(--active-btn-bg);
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

HTML代码

<table class="calculator" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
    <td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="1" onclick="display('1')" /> </td>
    <td> <input type="button" value="2" onclick="display('2')" /> </td>
    <td> <input type="button" value="3" onclick="display('3')" /> </td>
    <td> <input type="button" value="/" onclick="display('/')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="4" onclick="display('4')" /> </td>
    <td> <input type="button" value="5" onclick="display('5')" /> </td>
    <td> <input type="button" value="6" onclick="display('6')" /> </td>
    <td> <input type="button" value="-" onclick="display('-')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="7" onclick="display('7')" /> </td>
    <td> <input type="button" value="8" onclick="display('8')" /> </td>
    <td> <input type="button" value="9" onclick="display('9')" /> </td>
    <td> <input type="button" value="+" onclick="display('+')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="." onclick="display('.')" /> </td>
    <td> <input type="button" value="0" onclick="display('0')" /> </td>
    <td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
    <td> <input type="button" value="*" onclick="display('*')" /> </td>
  </tr>
</table>

解决方案 #

问题根源

你看到的"内边距"并非<td>本身的padding，而是两个原因导致：

1. 表格单元格默认的间距未彻底清除
2. HTML代码中<td>与<input>之间的换行空格被浏览器解析为空白字符，形成视觉间距
   另外border-collapse: collapse会和表格的border-radius属性冲突，导致边角错乱。

修复步骤

1. 彻底清除表格间距
   给.calculator类添加border-spacing: 0（替代老旧的cellspacing属性），同时去掉border-collapse: collapse：

   .calculator {
     /* 保留原有样式，新增这一行 */
     border-spacing: 0;
   }
   

2. 移除HTML中的空白字符
   把<td>和<input>之间的换行、空格删掉，比如：

   <!-- 修改前 -->
   <td> <input type="button" value="1" onclick="display('1')" /> </td>
   <!-- 修改后 -->
   <td><input type="button" value="1" onclick="display('1')"></td>
   

3. 确保单元格无额外间距
   给<td>添加margin: 0，避免意外的间距：

   th, td {
     padding: 0;
     margin: 0;
   }
   

4. 适配按钮与单元格宽度
   将按钮宽度改为100%，让它占满整个单元格，同时给<td>设置固定宽度（因为是4列，每列占25%）：

   td {
     width: 25%;
   }
   input[type=button] {
     width: 100%;
     box-sizing: border-box;
   }
   

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