如何使表格中输入框文本与标签字体大小一致并自适应行高？

浏览器默认会为表单元素（如input、select、textarea等）设置独立的字体样式，这才是导致输入框文字比标签小的核心原因，并非空间不足导致文本缩小。要实现输入框文字与标签字体大小一致，同时让表格行自动适应内容高度，可通过以下通用CSS方案处理：

通用CSS重置方案 #

/* 统一表格内所有表单元素的字体样式，继承父元素属性 */
table input,
table select,
table textarea,
table button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0.2em 0.4em;
  box-sizing: border-box;
}

/* 确保表格单元格有合适的基础行高，内容溢出时自动扩展行高 */
table td {
  line-height: 1.5;
  /* 若需要内容自动换行，可将white-space设为normal；如需强制不换行则保留nowrap */
  white-space: normal;
}

代码说明 #

• font-family: inherit：让表单元素继承表格的字体，避免浏览器默认字体差异
• font-size: inherit：强制输入框文字大小与标签完全一致
• line-height: inherit：使输入框行高与单元格同步，确保文字不会被截断，行高不足时表格行会自动扩展
• box-sizing: border-box：保证输入框的内边距和边框不会额外占用宽度，避免挤压布局空间
• 单元格的line-height设置：提供基础行高，当输入框内容需要更多垂直空间时，行高会自动适配

完整示例代码 #

<style>
table input,
table select,
table textarea,
table button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0.2em 0.4em;
  box-sizing: border-box;
}

table td {
  line-height: 1.5;
  white-space: normal;
}
</style>

<table>
  <tr>
    <td>Title</td>
    <td><input type="text" name="title" value="My Title" /></td>
  </tr>
  <tr>
    <td>Description</td>
    <td><textarea name="description">This is a long description that might wrap to multiple lines and require more line height</textarea></td>
  </tr>
  <tr>
    <td>Category</td>
    <td>
      <select name="category">
        <option>Basic Option</option>
        <option>Longer Category Name That Needs Extra Space</option>
      </select>
    </td>
  </tr>
</table>

额外注意事项 #

• 对于复选框、单选框这类无需继承字体大小的元素，可单独排除：

  table input[type="checkbox"],
  table input[type="radio"] {
    font-size: initial;
  }
  

• 可根据设计需求调整padding和line-height的值，优化视觉对齐效果
• 该方案适用于所有类型的表单元素，是表格内表单样式的通用处理方式

内容的提问来源于stack exchange，提问作者mr.b