如何设置表格tr行最小高度为50px且文本较多时可自适应弹性调整

DevOps 小满

2026-10-4

问题原因

你当前的代码存在两个核心错误导致效果不符合预期：

给<tr>设置了display: flex，覆盖了表格行默认的display: table-row原生特性，破坏了表格自带的自适应布局逻辑，导致高度相关属性不生效
给<tr>设置了固定height: 50px，锁死了行高，无法被多行内容撑开

修正方案

直接删除tr上的flex相关配置，用表格原生的vertical-align实现内容垂直居中，将固定高度替换为最小高度即可，代码如下：

原生CSS写法（兼容所有浏览器）

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框，可选按需调整 */
}

table tr:nth-child(odd) {
  background-color: rgba(238, 238, 238, 0.5);
}

table tr {
  min-height: 50px; /* 最小高度50px，内容溢出自动撑开 */
}

table th, table td {
  vertical-align: middle; /* 单元格内容垂直居中，替代flex的居中效果 */
  padding: 8px 12px; /* 可选增加内边距，优化显示效果 */
}

预处理器嵌套写法（适用于Sass/LESS/开启原生嵌套的CSS场景）

table {
  width: 100%;
  border-collapse: collapse;

  tr:nth-child(odd) {
    background-color: rgba(238, 238, 238, 0.5);
  }

  tr {
    min-height: 50px;
  }

  th, td {
    vertical-align: middle;
    padding: 8px 12px;
  }
}