单元格中的静态伪元素

Question

与this question有关。

当数字包含相同数量的数字时，伪元素条形线将被正确显示，但在数字不同时失败，例如，在没有小数的价格中。

有解决办法吗？

​

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;
border-style: solid;
border-color: #35D0CD;
padding: 0 2rem; 
text-align:center;
}

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

span {color:red;}

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);}

<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>

​

Answer 1

做了一些修改，使它更简单，更可靠。我起诉box-sizing: border-box;是为了使尺寸、填充和边框变得更简单(即:无论填充和边框有多大，width: 200px都意味着200 ie)。

然后我做了td的全尺寸(没有填充，宽度100%)，所以它的子级更容易操作。

我使span和bdi两个内联块都有50%的宽度，文本对齐中心被应用于它们，而不是它们的父块。

然后，我能够删除:after，只需在bdi上设置一个边框。

​

table, th, td, bdi, span {
  box-sizing: border-box;
}

table {
  display: block;
  margin: 4rem auto 3rem;
  width: fit-content;
  max-height: 205px;
  border-collapse: collapse;
  border: 2px solid #35d0cd;
  border-bottom: none;
  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%;
  display: inline-block;
  width: 50%;
  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>

​