如何缩小HTML表格中bdg4x与bdg0x间原bdg6x占据的间距？

你的问题核心在于：虽然用相对定位移动了bdg6x元素，但它原本所在的表格单元格依然占据着宽度，导致bdg4x和bdg0x之间残留了这个单元格的默认间距。下面给你几个实用的解决思路，按需选择即可：

方法1：压缩bdg6x所在单元格的宽度（改动最小） #

既然相对定位的元素只是视觉上移动，单元格还占着空间，那我们直接把这个单元格的宽度压到0，同时隐藏溢出内容：

.comment { 
  font-size: 10px; 
  position: relative; 
  left: 100px; 
  top: -10px; 
  color: red; 
}
/* 新增这段CSS，针对bdg6x所在的第二列单元格 */
.badges tr.info td:nth-child(2) {
  width: 0;
  padding: 0;
  overflow: hidden;
}

这个方法不需要改动HTML结构，只是通过CSS把多余的单元格空间去掉，bdg6x的相对定位布局也能保留。

方法2：把bdg6x改成绝对定位（彻底脱离表格流） #

如果你的布局允许，把comment类的定位改成绝对定位，让它完全脱离表格的正常布局流，这样原单元格就不会再影响间距了。注意要给父元素设置相对定位作为参考：

.comment { 
  font-size: 10px; 
  position: absolute; /* 替换成绝对定位 */
  left: 150px; /* 根据实际需求调整位置 */
  top: 5px; 
  color: red; 
}
/* 给行元素设置相对定位，作为绝对定位的参考容器 */
.badges tr.info {
  position: relative;
}
/* 可选：进一步压缩原单元格空间 */
.badges tr.info td:nth-child(2) {
  width: 0;
  padding: 0;
}

这种方式下bdg6x完全不会干扰表格内其他元素的间距，布局更灵活。

方法3：改用Flex布局替代表格（推荐长期维护） #

表格布局在这种需要灵活调整元素位置的场景下天生不够灵活，换成Flex布局可以彻底摆脱单元格宽度的限制：

<style>
.badge-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px; /* 模拟表格行的间距 */
  position: relative;
}
.comment {
  font-size: 10px;
  color: red;
  position: absolute;
  left: 100px;
  top: -10px;
}
</style>
<div class='badges'>
  <div class='badge-row'>
    <span id='bdg41'>BADGE:</span>
    <span id='bdg01'>000026999650:</span>
    <span id='bdg21'>(n°1)</span>
    <span id='bdg61' class='comment'>0002699965046</span>
  </div>
  <div class='badge-row'>
    <span id='bdg42'>BIP:</span>
    <span id='bdg02'>000043280487:</span>
    <span id='bdg22'>(n°2)</span>
    <span id='bdg62' class='comment'>0004328048703</span>
  </div>
</div>

Flex布局下，元素的间距完全由你控制，后期调整样式或结构也会更方便。

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