CSS技巧：解决表格单元格内动态内容分隔线对齐问题

bdi:after {
    content: "|";
    margin: 0 1.75rem;
    font-size: 1.5rem;
    color: #35D0CD;
    line-height: 0; /* 尝试垂直居中 */
    display: inline-block;
    transform: scale(0.7, 1.4); /* 尝试拉伸 */
}

table, th, td, bdi, span {
  box-sizing: border-box; /* 应用到所有相关元素 */
}

td {
  width: 100%; /* 确保td占据其父级（行）的全部宽度 */
  padding: 0;  /* 移除td自身的内边距，让子元素控制内部空间 */
}

bdi, span {
  height: 100%;          /* 确保它们与td等高 */
  display: inline-block; /* 使其可以设置宽度和高度，并保持同行显示 */
  width: 50%;            /* 每个占据td宽度的50% */
  text-align: center;    /* 内容在各自的50%宽度内居中 */
  padding: 0 1em;        /* 为内容添加左右内边距 */
}

bdi {
  border-right: solid 2px #35d0cd; /* 使用右边框作为分隔线 */
  color: blue;
  text-decoration: line-through;
}

table, th, td, bdi, span {
  box-sizing: border-box; /* 统一盒模型 */
}

table {
  display: block; /* 允许设置宽度和高度，并支持overflow */
  margin: 4rem auto 3rem;
  width: fit-content; /* 宽度适应内容 */
  max-height: 205px;
  border-collapse: collapse; /* 合并边框 */
  border: 2px solid #35d0cd; /* 表格整体边框 */
  border-bottom: none; /* 底部边框由td控制 */
  overflow-y: auto; /* 垂直滚动 */
}

th, td {
  border-bottom: 2px solid #35d0cd; /* 每个单元格的底部边框 */
}

th {
  position: sticky; /* 表头固定 */
  top: 0;
  background: black;
  color: white;
}

td {
  width: 100%; /* 单元格占据全部宽度 */
  padding: 0; /* 移除单元格内边距 */
}

bdi, span {
  height: 100%; /* 与td等高 */
  display: inline-block; /* 允许设置宽高，并排显示 */
  width: 50%; /* 各占td宽度的一半 */
  text-align: center; /* 内容居中 */
  padding: 0 1em; /* 内部左右边距 */
}

bdi {
  border-right: solid 2px #35d0cd; /* 分隔线 */
  color: blue;
  text-decoration: line-through; /* 删除线 */
}

span {
  color: red;
}

<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>2,50</bdi><span>21,13</span></td>
    </tr>
    <tr>
      <td><bdi>2,50</bdi><span>2</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>