占表格单元格100%高度的input与select文本垂直顶部对齐方案

仅用纯CSS即可实现该需求，无需引入JavaScript，完全满足保留原生输入框、动态高度适配的要求。

实现思路：现代非IE、非Safari浏览器已经支持给input、select这类替换元素设置网格/弹性布局规则，可以直接通过布局对齐属性控制内部文本的垂直位置，不需要使用固定padding，完全适配动态高度。

你只需要在原有CSS基础上补充对齐相关规则即可，修改后的完整代码如下：

table {
  height: 1px;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  position: relative;
  height: 100%;
  border: 1px solid grey;
  padding: 0;
}

input,
select {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  /* 新增核心对齐规则 */
  display: grid;
  align-content: start;
  padding: 0;
  margin: 0;
}
/* 可选：如果需要调整select下拉箭头的位置，补充以下样式 */
select {
  padding-right: 1.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px top 4px;
}

以上实现不会修改输入框100%高度的原有规则，适配任意动态单元格高度，输入框内部文本会自动和第二列内容顶部对齐。

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