Bootstrap4表格边框内列尾存在大量额外空白，调整属性无效如何解决

问题根因 #

你遇到的表格末尾空白问题，是错误混用Bootstrap布局类、破坏了原生表格布局逻辑导致的：

1. table-responsive 是Bootstrap提供的表格滚动包裹类，不能直接加在<table>标签上，必须放在表格的外层容器上，否则会导致表格宽度计算异常
2. 你给<tr>添加了d-flex类，将表格行强制转为弹性容器，弹性容器默认占满父级100%宽度，但你没有给<th>/<td>设置弹性伸缩属性，列总宽度撑不满行容器时就会在末尾留下空白

修复方案 #

按以下步骤调整代码即可：

• 第一步：新增table-responsive外层容器，移除table标签上的table-responsive类，同时给table添加width: auto强制宽度自适应内容

<div class="card-body" style="border : 1px solid green ">
  <!-- 新增这层表格滚动包裹容器 -->
  <div class="table-responsive">
    <table id="example2" class="table table-bordered table-hover" style="border: 1px solid purple; white-space:nowrap; width: auto !important;">

• 第二步：移除所有<tr>上的d-flex、align-content-center类，如果需要单元格内容垂直居中，给行添加align-middle类即可

<!-- 表头行修改为 -->
<tr>
<!-- 表体行修改为 -->
<tr class="align-middle">

调整后表格宽度会完全根据内容总宽度计算，不会强制撑满父容器，末尾空白会直接消失；如果表格内容总宽度超过父容器宽度，外层容器会自动出现横向滚动条，符合Bootstrap的表格使用规范。

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