Bootstrap4表格行高度无法缩小，设置max-height不生效如何解决？

问题原因 #

• Bootstrap4 默认给.table类的th、td设置了上下0.75rem（约12px）的内边距，是留白的主要来源
• 表格单元格为table-cell布局，直接给tr/td设置max-height属性本身就不生效
• 你提供的代码中存在多余的<br>标签、空<div>元素，会额外撑高行高

解决步骤 #

1. 移除行内多余占位元素 #

删除单元格内没用的空标签和换行，比如你代码里的这两行无效内容：

<br>
<div class='d-flex justify-content-start'></div>

2. 新增自定义紧凑表格CSS样式 #

在Bootstrap CSS文件引用之后，添加如下自定义样式，按需调整上下内边距数值到你需要的1-2px即可：

/* 自定义超紧凑表格样式 */
.table.table-ultra-compact th,
.table.table-ultra-compact td {
  padding-top: 1px;
  padding-bottom: 1px;
  /* 若需缩小左右内边距可补充以下属性
  padding-left: 4px;
  padding-right: 4px;
  */
}
/* 调小表格内按钮的内边距，避免撑高行 */
.table.table-ultra-compact .btn {
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 0;
}
/* 统一缩小单元格内所有元素的行高，消除额外留白 */
.table.table-ultra-compact td * {
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
}

3. 给表格绑定自定义类 #

修改你的table标签的class属性，新增我们刚定义的样式类：

<table class="table table-bordered table-hover table-ultra-compact">

额外说明 #

如果调整后还是有多余留白，可打开浏览器开发者工具，选中对应单元格，查看内部子元素是否有自带的上下margin/padding，针对性覆盖即可。

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup