HTML表格中input设为顶部对齐时，如何调整td文本高度？

要实现第一个单元格的输入框顶部对齐，同时让总计文本和复选框保持垂直居中，不需要用padding，直接针对不同单元格设置vertical-align属性即可：

修改后的CSS代码 #

/* 数量输入框所在单元格顶部对齐 */
#tableRows td:first-child {
  vertical-align: top;
}

/* 总计文本单元格样式（保留原有设置，确保垂直居中） */
.total_price,
.total_terms {
  text-align: right;
  font-weight: bold;
  vertical-align: middle;
}

/* 复选框所在单元格垂直居中 */
#tableRows td:last-child {
  vertical-align: middle;
}

原理说明 #

表格单元格的vertical-align属性直接控制单元格内所有内容的对齐方式：

• 给第一个单元格设置vertical-align: top，里面的输入框会自动贴紧单元格顶部；
• 总计文本和复选框所在单元格设置vertical-align: middle，就能保持内容垂直居中，不受第一个单元格高度变化的影响；
• 这种方式比用padding更可靠，因为表格布局中单元格的内边距不会直接改变内容的垂直对齐位置，而vertical-align是专门针对表格单元格内容对齐的属性。

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