单元格内Static伪元素竖线数字位数不同时显示异常求助

问题根源是原布局依赖行内元素的自然流对齐，当价格内容宽度变化时，伪元素竖线的对齐基准线会偏移，导致显示异常。用flex布局可以轻松解决这个问题，让分隔线始终稳定在两个价格中间：

修改后的CSS代码 #

table {
  border-collapse: collapse;
  width: fit-content;
  margin: 4rem auto 3rem;
  max-height: 205px;
  overflow-y: auto;
  display: block;
  border-top: 2px solid #35D0CD;
  border-bottom: 2px solid #35D0CD;
}

th {
  background: black;
  color: white;
  position: sticky;
  top: 0;
}

td {
  border: 2px solid #35D0CD;
  padding: 0 2rem; 
  text-align: center;
  /* 启用flex布局，让内部元素横向居中对齐 */
  display: flex;
  align-items: center;
  /* 固定两个价格之间的间距 */
  gap: 1.75rem;
}

bdi {
  color: blue;
  text-decoration: line-through;
}

span {
  color: red;
}

bdi::after {
  content: "|";
  font-size: 1.5rem;
  color: #35D0CD;
  transform: scale(0.7, 1.4);
  /* 确保分隔线不会被压缩，保持固定大小 */
  flex-shrink: 0;
}

对应的HTML（无需修改） #

<div>
  <table>
<tr><th>Price</th></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
<tr><td><bdi>2,20 €</bdi><span>2 €</span></td></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
<tr><td><bdi>22,50 €</bdi><span>21,13 €</span></td></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
<tr><td><bdi>200,50 €</bdi><span>180,13 €</span></td></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
<tr><td><bdi>22,50 €</bdi><span>21,13 €</span></td></tr>
<tr><td><bdi>2,50 €</bdi><span>2,13 €</span></td></tr>
  
  </table>
  
</div>

原理说明 #

把td设为flex容器后，内部的bdi和span会按照flex规则排列：

• align-items: center保证两个价格垂直居中对齐，避免因内容高度差异导致的偏移
• gap属性固定了两个元素之间的间距，替代原代码中margin的作用，更稳定
• 给伪元素添加flex-shrink: 0，防止分隔线在空间不足时被压缩，始终保持预设的尺寸和位置

这样不管价格的位数、长度如何变化，分隔线都能稳定显示在两个价格的中间位置。

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