基于Bootstrap+JSP的表格：同一<tr>内按钮影响<td>内边距时如何居中内容？

看起来问题出在几个细节上：文本列的样式设置逻辑不对，按钮列的表单默认外边距也放大了视觉差，下面是具体的修复方案：

核心原因分析 #

1. 你给文本列的<span>加了v-100（高度100%）和align-middle，但align-middle在非flex容器中无法生效，反而可能打乱td的内边距计算逻辑。
2. Bootstrap的<form>默认带有margin-bottom:1rem，虽然按钮列的td内边距数值正常，但这个外边距会让按钮和td底部产生额外空隙，和文本列的视觉差异被放大。
3. 没有给文本列的td显式设置垂直居中和统一内边距，依赖默认样式可能被自定义代码意外覆盖。

修复后的代码示例 #

<tbody>
  <c:forEach items="${results.items}" var="result">
    <tr>
      <!-- 按钮列：优化表单结构，消除默认外边距干扰 -->
      <td class="align-middle">
        <form method="post" accept-charset="UTF-8" class="mb-0">
          <input type="hidden" name="itemUri" value="${result.uri}">
          <button type="submit" class="btn btn-info">See</button>
        </form>
      </td>
      <!-- 文本列：直接给td设置居中和统一内边距 -->
      <td class="align-middle py-3">
        Green Eggs and Ham
      </td>
    </tr>
  </c:forEach>
</tbody>

关键修改说明 #

• 给td添加align-middle：Bootstrap的这个类专门用于表格单元格内容的垂直居中，比给内部元素设置更可靠，一步解决居中需求。
• 文本列加py-3：这个工具类会设置上下内边距为1rem（约16px），如果需要精确12px，可以换成py-2.5或者自定义内联样式style="padding-top:12px; padding-bottom:12px;"，确保和按钮列内边距完全一致。
• 表单加mb-0：移除form默认的底部外边距，避免按钮和td底部产生额外空隙，让两列的视觉内边距统一。
• 简化文本列结构：去掉多余的<span>，直接把文本放在td里，减少不必要的层级干扰。

额外排查点 #

如果修改后内边距还是异常，检查你的全局样式是否有覆盖Bootstrap表格的默认padding，比如是否存在类似：

td {
  padding: 0 !important;
}

这种强制覆盖会导致td内边距失效，需要移除或者调整样式优先级。

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