无法调整HTML表格表头与单元格内边距，请求技术指导

你作为HTML新手，在结合JS和CSS开发时遇到表格样式问题：明明给<th>和<td>设置了相同的padding:8px，但两者间距视觉差异明显，从截图能看到表头单元格的高度比数据单元格高很多。

问题根源是浏览器自带的用户代理样式——浏览器会给<th>元素预设额外样式（比如默认垂直对齐为baseline、字体加粗、隐性行高等），这些样式会干扰你的自定义设置，导致视觉上的内边距不一致。另外你的CSS里还有个无效的hidden选择器，顺便一起修正。

修正后的CSS代码 #

/* 重置表格相关元素的默认样式，消除浏览器差异 */
table, th, td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  box-sizing: border-box; /* 确保内边距不会额外撑大单元格 */
}

table {
  width: 100%;
}

th, td {
  border: 1px solid #000;
  text-align: left;
  padding: 8px;
  vertical-align: middle; /* 统一表头与单元格的垂直对齐方式 */
  line-height: 1.4; /* 统一行高，避免高度差异 */
  font-weight: normal; /* 可选：去掉表头默认的加粗样式，完全统一视觉 */
}

/* 用类选择器控制隐藏元素，原`hidden`标签选择器无效 */
.hidden {
  display: none;
}

可选：优化HTML结构（分离样式与结构） #

把行内的style="display:none;"替换为class="hidden"，更符合CSS与HTML分离的原则：

<tr id="year-1-data" class="hidden">
  <td>Year 1</td>
  <td><input type="number" id="Applications_Year_1__c" name="Applications_Year_1__c" /></td>
  <td><input type="number" id="Users_Year_1__c" name="Users_Year_1__c" /></td>
</tr>
<!-- 其他年份行、表格容器同理替换 -->
<div id="data-table" class="hidden">

生效说明 #

• box-sizing: border-box：让内边距和边框包含在元素的宽高内，避免单元格因padding被额外撑大。
• 统一vertical-align和line-height：消除表头与单元格因默认对齐、行高不同造成的视觉高度差。
• 重置默认样式：清除浏览器给<th>预设的额外样式，确保你的自定义padding完全生效。

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