Ionic+Angular动态表格新增记录后行高过窄高度不增长问题求助

问题根因 #

新增行高度过窄、表格整体高度不随记录增长的问题，是以下几个代码问题共同导致的：

1. 表格外层div仅设置了min-height:30%，同时表格自身强制设置了height:100%，会把表格高度锁死为外层div的初始最小高度，无法随内容自动撑开
2. 表头<thead>中的<tr>标签未正确闭合，存在冗余的未闭合<tr>，导致浏览器渲染表格结构异常
3. 未给表格行设置最小高度，内容过少时行高会被异常压缩

具体修改步骤 #

1. 修正表格外层容器和表格的高度配置 #

找到对应HTML代码段，删除表格的height:100%强制高度配置，外层容器新增垂直方向自适应滚动配置，修改后代码如下：

<!-- 外层容器新增overflow-y: auto，取消固定高度限制 -->
<div style="overflow-x: scroll; overflow-y: auto; min-height: 30%; padding: 10px 0;">
  <!-- 删掉table的height:100%，改成height:auto -->
  <table id='listaDeLotes' style="min-width: 80%; height: auto;">

2. 修正表头的标签闭合错误 #

把原来冗余的<tr>改成闭合标签</tr>：

<thead>
  <tr>
    <th>Bobina</th>
    <th>Peso</th>
  </tr> <!-- 这里原来写错成了<tr>，改成闭合标签 -->
</thead>

3. 给表格行增加最小高度配置（可选，优化显示效果） #

在SCSS中新增表格行的高度配置，避免行高被压缩：

#listaDeLotes tr {
  min-height: 40px; /* 可根据实际需求调整数值 */
  height: auto;
}

如果需要垂直方向内容居中，可以再加vertical-align: middle;到td的配置里：

#listaDeLotes tr td{
  width:80%;
  padding:5px 10px;
  text-align: center;
  vertical-align: middle; /* 新增这行 */
  cursor: pointer;
}

修改完成后，表格会随着listaLotes数组元素的新增自动撑开高度，当高度超过外层容器的最小高度时，会自动出现垂直滚动条，也不会出现行高过窄的问题。

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