如何为Bootstrap表格设置最小高度且保持行高最小

要解决表格行被过度拉伸、同时保持表头与单元格对齐的问题，无需修改HTML结构，只需调整CSS样式即可：

.table {
  flex-grow: 1;
  min-height: 300px; /* 替换为你需要的最小高度值 */
  display: flex;
  flex-direction: column;
}

.table > thead,
.table > tbody {
  display: table;
  width: 100%;
  border-collapse: collapse; /* 与Bootstrap默认表格边框规则保持一致 */
}

.table > tbody {
  flex-grow: 1;
  /* 若需要内容超出最小高度时滚动，可启用以下两行 */
  /* display: block; */
  /* overflow-y: auto; */
}

.table > tbody > tr {
  height: auto; /* 让行高仅由内容决定 */
}

.table > thead > tr {
  height: auto; /* 移除之前的临时1px高度修复 */
}

方案原理 #

• 将表格设置为flex-direction: column的Flex容器，让表头和表体垂直排列
• 给thead和tbody都设置display: table与width: 100%，确保两者列宽计算规则一致，彻底解决对齐问题
• 让tbody通过flex-grow:1占据表格的剩余空间，同时内部行保持height:auto，仅占用自身内容所需高度，避免过度拉伸

之前方案的对齐问题原因 #

此前的代码仅单独给thead和tbody设置display:table但未指定宽度，导致两者列宽计算逻辑不一致，添加width:100%即可让列宽统一对齐。

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