Angular中如何固定表格行高，避免内容多行时行高变化

要固定表格行高度、避免内容多行导致的行高不一致，你可以通过CSS统一控制行、单元格以及内部元素的高度和溢出行为，具体方案如下：

1. 固定行与单元格高度，统一对齐方式 #

给表格行和单元格设置固定高度，同时指定垂直对齐方式，确保所有行高度一致：

/* 固定表格行高度，根据实际需求调整数值 */
.others-row {
  height: 60px;
}

/* 单元格继承行高，统一垂直对齐，防止内容偏移 */
.table-td-height {
  height: 100%;
  vertical-align: middle;
  overflow: hidden;
}

2. 调整内部表单元素的高度 #

Angular Material的mat-form-field默认带有margin和内边距，会撑开单元格，需要调整其样式适配固定高度：

/* 让mat-form-field填满单元格高度，移除默认外边距 */
.table-td-height mat-form-field {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
}

/* 控制textarea的高度，内容过多时显示滚动条 */
.table-td-height textarea {
  max-height: 42px; /* 小于单元格高度，留出上下空间 */
  overflow-y: auto;
  resize: none; /* 禁止用户调整textarea大小，可选 */
}

3. 可选：启用固定表格布局 #

给表格标签添加table-layout: fixed，让表格列宽和行高更稳定，避免内容撑开布局：

table {
  table-layout: fixed;
  width: 100%;
}

注意事项 #

• 行高数值要根据你使用的组件（比如mat-select、textarea）的默认高度来调整，确保内容不会被截断或显示不全
• 如果不需要滚动条，想直接截断多行内容，可以把textarea替换为带有text-overflow: ellipsis的div（需要配合white-space: nowrap或display: -webkit-box实现多行截断）

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